如何横向放置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;
}

Answer 2

您还需要为container设置宽度。

Answer 3

您的content-div也需要有宽度。

#content {
    width: 1000px;
}