假设我想要有两列。右侧的那一列宽度为 200 像素,左侧的那一列则占据剩余的宽度。这个能实现吗?我应该将左侧那一列的宽度设置为多少呢?
现在我们有了Flexbox(全球95%以上的支持率),这种布局(以及其他布局)可以很容易地实现,而不需要样式依赖于源顺序。
Flexbox示例:
<div class="flex-container">
<div class="flex-column"> Big </div>
<div class="fixed-column"> Small </div>
</div>
.flex-container {
display: flex;
}
.flex-column {
flex: 1;
}
.fixed-column {
width: 200px;
}
诀窍在于将余数列的边距与浮动侧边栏的宽度匹配。记住,在使用浮动时,源顺序很重要,因此我们确保浮动元素先出现。
示例:右对齐小列
<div id="Container">
<div id="RightColumn">Right column</div>
<div id="LeftColumn">Left column</div>
</div>
#RightColumn {
float : right;
width : 200px;
}
#LeftColumn {
margin-right : 200px;
}
LeftColumn
然后是 RightColumn
(其中右列是固定的)吗? - ton<div id="Container">
<div id="LeftColumn" style="float: left; margin-right: 200px;"></div>
<div id="RightColumn" style="float: right; width: 200px;"></div>
</div>
或者
<div id="Container">
<div id="RightColumn" style="float: right; width: 200px;"></div>
<div id="LeftColumn" style="margin-right: 200px;"></div>
</div>
float:left
添加到左列也似乎可以解决这个问题。http://jsfiddle.net/4k9Fj/ - mpen如果您不想使用浮动div,可以采用以下方法:
.rightDiv {
position: absolute;
right: 0;
width: 200px;
}
.mainDiv {
position: absolute;
left: 0;
right: 200px;
}
position:relative
的容器中,以便使列相对于容器而非页面定位,是吗? - mpen是的,这是可能的。将右列的样式设置为float: right和width: 200px,左列将成为内容并占据其余的宽度。
<div>
…所以我想澄清一下... - Gabe