两个浮动柱 - 一个固定，一个宽松 [英] Two floated columns - one fixed, one loose width

问题描述

我已经看过 SO ，但我找不到一个匹配我的出现，我基本上有两列一个固定宽度（185px），其他列没有固定宽度，但是我需要最后一列填充最后一个空格，例如

I've looked around SO, but I cannot find one that matches my occurrence, I basically have two columns one fixed width (185px) and the other column has no fixed width, however I need the last column to fill the last space, e.g.

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

当第二列填充剩余宽度时，第一列应始终为100％，它们都是浮动的 left ，如果我调整浏览器窗口的大小，第二列显示在第一列下。

The first column should always be 100% to the bottom when the second column fills the remaining width, they both are floated left, if I resize the browser window, the second column shows under the first column. I need the second column to fill the remaining width and be flexible when resizing the browser window.

推荐答案

查看这。
没有任何演示，但我已经使用这个家伙的教程，所以我认为它的工作正常。我从文章中得知主要内容是液体。侧面内容也可能是液体，但我想你可以给它一个固定的宽度，并留在那。这里的诀窍是将主要内容放在第一位。

Have a look at this. There aren't any demos, but I've used tutorials from this guy before so I assume it works fine. I gather from the article that the main content is liquid. The side content may also be liquid, but I think you can just give it a fixed width and leave it at that. The trick here is to place the main content first.

这篇关于两个浮动柱 - 一个固定，一个宽松的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！