Question

不要开始关于table vs css的大辩论 - 这里就是

我想要实现两列布局，如您所见： http://jsfiddle.net/p5S5J/1/（不按比例）

这是我尝试使用DIV进行布局 http://jsfiddle.net/xyt2r/1/

基本上，有没有办法让第二个DIV自动填充它的（固定宽度）父容器中的其余空间，而不必为它指定宽度？

UPDATE
@thirtydot想出了这个（我编辑了一下）：http://jsfiddle.net/thirtydot/xyt2r/5/ 似乎溢出：隐藏在第二个DIV上保持边界。我必须仔细看看这个，因为在Chrome中似乎有一些奇怪的边缘动作，我不相信这不是Voodoo。任何人都在关心解释为什么/如何运作？

Answer 1

所以，我正在评论中做出正确答案。我稍微改进了CSS。

请参阅： http://jsfiddle.net/2WUgK/

我不相信这不是Voodoo

这适用于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;
}

Answer 2

我创建了您正在寻找的布局。简单使用Float和Clear（css元素）http://jsfiddle.net/louis002/ZWGfQ/10/

Answer 3

我更喜欢使用表格，因为它似乎更适合跨浏览器使用但我听到你了，所以当我使用div标签时我所做的就是“浮动”左列左侧并向右浮动右栏

<div style="float:left;">left column</div>
<div style="float:right:">right column</div>

我有更好的运气，而不是指定宽度，因为某些浏览器可能无法正确显示它，或者如果我内部有动态数据并且它会移动，那么繁荣！你的网页现在已经完全没了。

如何实现布局目标 - 两栏

3 个答案: