CSS列:固定宽度和"余数"？

Question

假设我想要两列.右边是200px宽,左边是占据剩余宽度.这可能吗？我该如何设置左列的宽度？

Answer 1

更新:使用Flexbox解决

既然我们拥有Flexbox(全局支持率超过95%),那么可以轻松实现此布局(以及其他布局),而不依赖于源顺序.

Flexbox示例:

HTML

<div class="flex-container">
   <div class="flex-column"> Big </div>
   <div class="fixed-column"> Small </div>
</div>

CSS

.flex-container {
   display: flex;
}
.flex-column {
   flex: 1;
}

.fixed-column {
  width: 200px;
}

使用Flexbox进行现场演示

解决使用浮动

诀窍是将剩余列的边距与浮动侧边栏的宽度相匹配.请记住,源代码在使用浮点数时很重要,因此我们确保浮动元素首先出现.

右对齐小列示例:

HTML

<div id="Container">
    <div id="RightColumn">Right column</div>
    <div id="LeftColumn">Left column</div>
</div>

CSS

#RightColumn {
    float : right;
    width : 200px;
}

#LeftColumn {
    margin-right : 200px;
}?

现场演示

• 右对齐小柱
• 左对齐的小列

Answer 2

您float是左列并将边距设置为左列宽度的最小值.

<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>