将 DIV 与固定宽度左栏的右侧对齐
使用流体布局,尝试使用 200px 的左栏和右 div 应该宽度方向扩展。当一些宽内容进入时(比如有几列的表格),如果浏览器不够宽,右侧的 div 会被推到左侧栏下方。
我该如何排序?
#container{
min-height:300px;
}
#leftBar{
width:200px;
float:left;
}
#content{
float:left;
padding:20px;
}
<div id="container">
<div id="leftBar">
Left bar here fixed width 200px
</div>
<div id="content">
Should expand to fit parent div, but any long content pushes this beneath the leftBar div
</div>
<div class="clear"></div>
</div>
With a fluid layout, trying to have a 200px left bar and the right div should expand width wise. When some wide content goes in (say a table with a few columns), if the browser isn't wide enough, the right div gets pushed down below the left bar.
How can I sort this?
#container{
min-height:300px;
}
#leftBar{
width:200px;
float:left;
}
#content{
float:left;
padding:20px;
}
<div id="container">
<div id="leftBar">
Left bar here fixed width 200px
</div>
<div id="content">
Should expand to fit parent div, but any long content pushes this beneath the leftBar div
</div>
<div class="clear"></div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
正确的解决方案在这里:
在 CSS 中,如何获得左侧固定宽度列和使用其余宽度的右侧表格?
The correct solution is here:
In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?