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

问题描述

假设我想有两列。右边一个是200px宽，左边一个只占用剩余的宽度。这可能吗？我如何设置左栏的宽度为？

Let's say I want to have two columns. The right one is 200px wide, and the left one just takes up the remaining width. Is this possible? What do I set the width of the left column to be?

推荐答案

更新：使用Flexbox解决

现在我们已经了（）此布局（和其他）可以轻松实现，而不依赖于源订单的样式。

Update: Solved Using Flexbox

Now that we have Flexbox (with over 95% support globally) this layout (and others) can be easily achieved without styles being dependent on source order.

Flexbox示例：

Flexbox Example:

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

CSS

CSS

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

.fixed-column {
  width: 200px;
}

---

---

---

解决使用浮点

这个技巧是将剩余列的边距与浮动边栏的宽度匹配。请记住，使用浮动广告素材时，来源顺序很重要，因此我们会先确定浮动元素。

Live Demo using Flexbox

---

---

---

Solved Using Floats

The trick is matching the remainder column’s margin to the floated sidebar’s width. Remember, source order matters when using floats, so we make sure the floated element comes first.

示例右对齐小栏：

Example right-aligned small column:

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

CSS

CSS

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

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

现场演示

Live Demo

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

这篇关于CSS列：固定宽度和“余数”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！