如何水平放置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;。

\n\n

* *重要提示：这是 CSS3 功能，某些浏览器可能不支持overflox-x。因此，我强烈建议您阅读以下内容：http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/。

\n\n

预览： http: //jsfiddle.net/WXFJU/

\n\n

超文本标记语言

\n\n

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

\n\n

CSS

\n\n

* {\n    margin: 0px;\n    padding: 0px;\n}\n\n#container {\n    width: 100%;\n    background: yellow;\n}\n\n#sidebar {\n    float: left;\n    background: red;\n}\n\n#content {\n    float: left;\n    white-space: nowrap;\n    background: green;\n}\n\n.box {\n    width: 200px;\n    height: 250px;\n    background: blue;\n    margin: 10px;\n    float: left;\n}\n\n.overflow-x {\n    overflow-x: scroll;\n    display: block;\n}\n

\n\n

\xe2\x80\x8b

\n