html - CSS 列 : Fixed width and "remainder"?

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

---

---

---

使用 float 解决

诀窍是将剩余列的边距与 float 侧边栏的宽度相匹配。请记住，使用 float 时源顺序很重要，因此我们确保 float 元素排在第一位。

示例右对齐小列:

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