divサイズの幅は固定されています。これをxと表記します
divサイズの高さが固定されています。
divのいずれかの側にボタンを追加して、ユーザーが右にナビゲートできるようにします。つまり、xピクセルを右に移動します。つまり、divの次のエントリを表示します。
誰かがこの問題の解決策を提案できますか?
これが私の現在のhtml/cssです:
<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;">
<div class="inner_container" style="width: 10000px;">
<table>
<tr>
<td style=" width: 577px; ">
<div style="text-align:left; margin: 0px 10px 10px 10px; width:557px; ">
<p>Add Comment to the Tesco Catalogue</p>
<form class="comment_form" action="profile" method="post">
<textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea>
<input type="submit" value="Submit"/>
</form>
</div>
</td>
<!-- do a for loop here to generate all other items -->
<td style="width:577px;">
<div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
<p class="comment_username"> User said at such a time</p>
<p class="comment_comment"> Comment ......</p>
</div>
</td>
<td style="width:577px;">
<div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;">
<p class="comment_username"> User said at such a time</p>
<p class="comment_comment"> Comment ......</p>
</div>
</td>
</tr>
</table>
</div>
</div>
これがjsfiddleです
したがって、divのいずれかの側に2つのボタンを追加します。どちらも、xピクセル、左または右、明らかに左ボタン左、たとえば前のコメント、右ボタン右、次のコメントを移動します。
したがって、私が作成したhtmlでは、ユーザーのクリックに応じて、スクロールバーを一度に左または右に577px移動させたいと思います。
みんなどう思うか教えて!