html – 如何水平放置div而不会溢出到新行？

概述我有一个左浮动div作为侧边栏(红色).在它旁边,还有另一个存储页面内容的div(绿色).内容div中的元素保持浮动(蓝色). 我希望能够在浏览器宽度太小而无法容纳它们的情况下水平滚动框.例如,如果有很多盒子.相反,内容div移动到侧边栏div下面,我滚动整个页面. 这是浏览器窗口足够宽时的页面布局： 这是HTML： <div id="container"> <div id="sidebar" 我有一个左浮动div作为侧边栏(红色).在它旁边,还有另一个存储页面内容的div(绿色).内容div中的元素保持浮动(蓝色).

我希望能够在浏览器宽度太小而无法容纳它们的情况下水平滚动框.例如,如果有很多盒子.相反,内容div移动到侧边栏div下面,我滚动整个页面.

这是浏览器窗口足够宽时的页面布局：

这是HTML：

<div ID="container">  <div ID="sIDebar">SIDebar</div>  <div ID="content">    <p >Box 1</p>    <p >Box 2</p>    <p >Box 3</p>  </div>  <div ></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;}

请帮我理解我做错了什么.谢谢.

解决方法 你只需要用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 >      <div ID="content">        <p >Box 1</p>        <p >Box 2</p>        <p >Box 3</p>      </div>  </div>  <div ></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;}

总结

以上是内存溢出为你收集整理的html – 如何水平放置div而不会溢出到新行？全部内容，希望文章能够帮你解决html – 如何水平放置div而不会溢出到新行？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。