8

固定幅の div 内にいくつかの HTML 要素があります。内部要素の幅の合計が、コンテナーの幅よりも大きくなっています。親の幅に達した後に壊れるのではなく、内部要素をインラインで表示する (および水平スクロールを表示する) にはどうすればよいですか?

ラッパーを追加して最小幅を割り当てることもできますが、コンテンツが変更された場合にサイズが変更されるものが必要です。

<div id="container">
    <div class="contents" id="one"></div>
    <div class="contents" id="two"></div>
    <div class="contents" id="three"></div>
    <div class="contents" id="four"></div>
</div>

#container {
    width: 100px;
    background-color: #CCC;
    overflow: auto;
    height: 100px;
}

.contents {
    width: 35px;
    height: 60px;
    float: left;
}
#one {
    background-color:#ABC;
}
#two {
    background-color:#333;
}
#three {
    background-color:#888;
}
#four {
    background-color:#AAA;
}

http://jsfiddle.net/elohr/G5YZ6/2/

ありがとう！

4

3 に答える 3

23

display:inline-blockの代わりに使用し、コンテナにfloat:left追加します。必要に応じて、コンテンツ要素white-space:nowrap;に追加します。デモwhite-space:normal

于 2013-04-25T01:56:56.380 に答える
3

これを試して：

  1. float: leftと置き換えますdisplay: inline-block;
  2. white-space: nowrap;容器に使用します。

CSS:

#container {
    width: 100px;
    background-color: #CCC;
    overflow: auto;
    height: 100px;
    white-space: nowrap;
}

.contents {
    width: 35px;
    height: 60px;
    display: inline-block;
}

フィドル: http://jsfiddle.net/praveenscience/G5YZ6/6/

于 2013-04-25T01:58:41.740 に答える
0

ルート DIV 要素では、オーバーフローがスクロール可能であることを常に指定できます。

<div id="container" style="overflow: scroll;">
  <div class="contents" id="one"></div>
  <div class="contents" id="two"></div>
  <div class="contents" id="three"></div>
  <div class="contents" id="four"></div>
</div>
于 2013-04-25T02:00:33.827 に答える