html - 如何实现布局目标 - 两栏

Question

不要开始关于表格与 css 的大辩论 - 开始吧

我想实现一个两列布局，您可以在此处看到: http://jsfiddle.net/p5S5J/1/ (不按比例)

这是我尝试让布局与 DIV 一起工作 http://jsfiddle.net/xyt2r/1/

基本上，有没有办法让第二个 DIV 自动填充其(固定宽度)父容器中的剩余空间，而无需为其指定宽度？

更新
@thirtydot 想出了这个(我编辑了一下):http://jsfiddle.net/thirtydot/xyt2r/5/ 似乎 overflow: hidden 在第二个 DIV 上保留了边界。我必须仔细研究一下，因为 Chrome 中似乎有一些奇怪的 margin 操作，而且我不相信这不是 Voodoo。有人愿意解释为什么/这是如何工作的吗？

Answer 1

所以，我正在根据我的评论做出正确的回答。我稍微改进了 CSS。

参见: http://jsfiddle.net/2WUgK/

I'm not convinced this isn't Voodoo yet

这将适用于 IE7+ 和所有现代浏览器。伏都教彻底解释here :)

HTML:

<div id="my-container">
    <div id="column-1" class="layout">Hi!</div>
    <div id="column-2" class="layout">Hello</div>
</div>

CSS:

#my-container {
    width: 200px;
    border: 1px solid red;
    padding: 6px 6px 6px 0;
}
#column-1 {
    margin: 0 6px;
    padding: 6px;
    width: 60px;
    float: left;
}
#column-2 {
    padding: 6px;
    overflow: hidden;
}
.layout {
    border: 1px solid blue;
    height: 120px;
}