html - 新しい行にオーバーフローせずにdivを水平に配置するには?

Question

サイドバー (赤) として機能する左フローティング div があります。その隣には、ページ コンテンツ (緑) を格納する別の div があります。コンテンツ div 内の要素は、フローティング (青) のままです。

ブラウザの幅が小さすぎてボックスに対応できない場合に、ボックスを水平にスクロールできるようにしたい。たとえば、箱がたくさんある場合。代わりに、コンテンツ div がサイドバー div の下に移動し、ページ全体をスクロールしています。

ブラウザ ウィンドウが十分に広い場合のページ レイアウトは次のとおりです。

HTMLは次のとおりです。

<div id="container">
  <div id="sidebar">Sidebar</div>
  <div id="content">
    <p class="box">Box 1</p>
    <p class="box">Box 2</p>
    <p class="box">Box 3</p>
  </div>
  <div style="clear: both;"></div>
</div>

CSS は次のとおりです。

* {
    margin: 0px;
    padding: 0px;
}

#container {
    background: yellow;
}

#sidebar {
    float: left;
    background: red;
}

#content {
    float: left;
    white-space: nowrap;
    background: green;
}

.box {
    width: 200px;
    height: 250px;
    background: blue;
    margin: 10px;
    float: left;
}

私が間違っていることを理解するのを手伝ってください。ありがとうございました。

Answer 1

CSSプロパティでコンテンツをラップするための何かが必要なだけですoverflow-x: scroll;。

* *重要：これはCSS3の機能であり、一部のブラウザはをサポートしていない場合がありますoverflox-x。したがって、次の内容を読むことを強くお勧めします：http: //net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/。

プレビュー： http： //jsfiddle.net/WXFJU/

HTML

<div id="container">
  <div id="sidebar">Sidebar</div>
  <div class="overflow-x">
      <div id="content">
        <p class="box">Box 1</p>
        <p class="box">Box 2</p>
        <p class="box">Box 3</p>
      </div>
  </div>
  <div style="clear: both;"></div>
</div>​​​​​

CSS

* {
    margin: 0px;
    padding: 0px;
}

#container {
    width: 100%;
    background: yellow;
}

#sidebar {
    float: left;
    background: red;
}

#content {
    float: left;
    white-space: nowrap;
    background: green;
}

.box {
    width: 200px;
    height: 250px;
    background: blue;
    margin: 10px;
    float: left;
}

.overflow-x {
    overflow-x: scroll;
    display: block;
}

</ p>

Answer 2

content-divにも幅が必要です。

#content {
    width: 1000px;
}

Answer 3

の幅も設定する必要がありcontainerます。