CSS列：固定宽度和“余数”？

Question

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

Answer 1

更新：使用Flexbox解决

现在我们已经Flexbox（over 95% support globally}这个布局（和其他）可以轻松实现，而且样式不依赖于源顺序。

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

Live Demo using Flexbox

---

---

---

使用Floats解决

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

示例右对齐小列：

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;
}​

现场演示

• Right-aligned small column
• Left-aligned small column

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>

OR

<div id="Container">
    <div id="RightColumn" style="float: right; width: 200px;"></div>
    <div id="LeftColumn" style="margin-right: 200px;"></div>
</div>

Answer 3

如果您不想浮动div，可以执行以下操作：

.rightDiv {
  position: absolute;
  right: 0;
  width: 200px;
}

.mainDiv {
  position: absolute;
  left: 0;
  right: 200px;
}

Answer 4

是的，有可能。将右列的样式设置为float：right和width：200px，左列将是内容并占据宽度的其余部分。