我的要求很简单:2 列,其中右侧的大小固定。不幸的是,我在 stackoverflow 和 Google 上都找不到有效的解决方案。如果我在自己的上下文中实现,那么其中描述的每个解决方案都会失败。目前的解决方案是:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
我得到以下代码:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
请指教。非常感谢!
最佳答案
删除左列的 float 。
在 HTML 代码中,右列需要在左列之前。
如果右边有一个 float (和一个宽度),如果左列没有一个宽度并且没有 float ,它会很灵活:)
还对外部 div 应用 overflow: hidden
和一些高度(可以是自动),以便它包围两个内部 div。
最后,在左列添加 width: auto
和 overflow: hidden
,这使得左列独立于右列(例如,如果你调整了浏览器窗口的大小,右栏接触了左栏,如果没有这些属性,左栏将围绕右栏运行,有了这些属性,它就会保留在其空间中。
示例 HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
关于css - 2列div布局: right column with fixed width,左流体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5195836/