我有一个左浮动 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;
}
请帮助我理解我做错了什么。谢谢你。