1

x方向にのみコンテンツを追加するにはどうすればよいですか？

タグに<div>5〜6枚の画像を入れています。divの全幅よりも大きい。したがって、divの幅の終わりに達した後、新しい行に戻ります。

私は置きました

img
{
    float:left;
}

しかし、運はありません。

divのoveflow-x:scroll;

しかし、運はありません。

画像を垂直方向ではなく水平方向に追加したい。すべての画像を表示するには、x方向のスクロールバーが必要です。

どこが足りないの？

HTML：

<div id="scrollar">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
</div>

幅には5つの画像が含まれています。その後、新しい行に移動します。その行のすべての画像のみが必要です。x方向にスクロールすると表示されます。

4

2 に答える 2

1

コンテナの幅を指定したり、マークアップを追加したりする必要はありません。折り返さないように指示するだけです。

http://jsfiddle.net/BHD5Y/

div#scrollar {
    white-space: nowrap;
    overflow-x: scroll;
}
于 2013-03-05T21:34:46.790 に答える
0

これを試して：

HTML:

<div class="wrapper">
    <div class="content">
        <img src="img/01.jpg" alt="" width="675">
        <img src="img/02.jpg" alt="" width="675">
        <img src="img/03.jpg" alt="" width="675">
        <img src="img/04.jpg" alt="" width="675">
        <img src="img/05.jpg" alt="" width="675">
    </div>
</div>

そしてCSS：

.wrapper{
   width:100%;
   height:100%;
   overflow:auto;
}

.content{
    height:450px;
    width: 3375px;
    position:absolute;
    left:0;
    top:0;
}

.portfolio img{
   margin:0 12px;
   float:left;
}
于 2013-03-05T21:16:31.847 に答える