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

Question

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

htmlcss

26

假设我想要有两列。右侧的那一列宽度为 200 像素，左侧的那一列则占据剩余的宽度。这个能实现吗？我应该将左侧那一列的宽度设置为多少呢？

- mpen

可能重复：https://dev59.com/rE_Ta4cB1Zd3GeqPCqY_ - Ryan Kinal

@Ryan：不完全相同。他想要两个流动列。不过很有趣！ - mpen

@Mark - 这是相同的概念，只是一个固定而另一个是流动的。只需固定右列的宽度并将其浮动到右侧即可。 - Ryan Kinal

2

@Mark，是的，我永远不会建议使用表格来进行布局，但问题中没有具体说明，我最初将其解读为数据表。但后来，在回答之前，我想你可能是想使用<div>…所以我想澄清一下... - Gabe

@Ryan：你说得对...那个解决方案实际上确实更好。 - mpen

显示剩余3条评论

4个回答

7

你需要将左列浮动，并将边距设置为左列宽度的最小值。

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

- Dustin Laine

我认为你反着做了... 你的意思肯定是给右列固定宽度，左列加上 margin 吧？ - mpen

实际上，你把它弄坏了 ;) 现在右列被推到了左列下面。将 float:left 添加到左列也似乎可以解决这个问题。http://jsfiddle.net/4k9Fj/ - mpen

请检查你的链接，还有我的更新。你可以使用同样的代码，但是在 HTML 中切换列的顺序。这是我的错误。 - Dustin Laine

实际上，这些解决方案都不能很好地与背景一起使用http://jsfiddle.net/bgBXM/ 我需要div实际上扩展以占用整个空间。 - mpen

当你添加更多内容http://jsfiddle.net/P6YWr/时，它根本不起作用。 - mpen

2

如果您不想使用浮动div，可以采用以下方法：

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

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

- Robusto

我其实不介意浮点数。我认为你需要将这些列包装在一个具有position:relative的容器中，以便使列相对于容器而非页面定位，是吗？ - mpen

1

@Mark：除非你想限制页面的总宽度（即不让它随浏览器的宽度扩展和收缩），否则你不必在容器中放置列。 - Robusto

1

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

- dmr

3

不要忘记将右侧部分的边距设置为200像素，否则如果文本较短，它将会放置在左列下方。 - Radomir Dopieralski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jlmakes · Accepted Answer

更新：使用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;
}