html - 使用 CSS 显示两列，一列具有固定宽度，另一列占用剩余空间

Question

我只是想了解使用 CSS 与使用表格的好处，但到目前为止我还不相信。我可以在一分钟内用表格完成的事情似乎用 CSS 来说并不那么容易(至少对我来说是这样)。所以，这个问题不是关于使用 CSS 与表格的优点。我需要知道如何使用 CSS 执行以下操作:

比如说，我有一个包含元素，需要将其分成两列，可以这么说:

<div id="idOuter">
 <div id="idLeft"></div>
 <div id="idRight"></div>
<div>

idLeft 元素必须具有固定宽度。例如，100 像素。它将包含一个带有边距的文本标签。但 idRight 必须占据 idOuter div 中剩余的宽度。它将包含一个带有边距的文本输入元素。 idOuter 还应该反射(reflect) idLeft 和 idRight 的高度，并有自己的边距。

那你要怎么做呢？我一直在搞乱 float 、内联 block 和宽度，但当我调整浏览器窗口大小时，它总是变得一团糟？

Answer 1

相对容易 - http://jsfiddle.net/bWuQB/5/

#idOuter {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#idLeft {
    height: 100%;
    width: 100px;
    background: orange;
    position: absolute;
}

#idRight {
    margin-left: 100px;
    height: 100%;
    background: beige;
}

你必须忘记使用表格进行布局和其他任何东西，但表格数据除外。当您习惯无表布局时，您会喜欢它们。从语义上讲，这是正确的解决方案。

编辑:删除了不必要的 float 语句并更新了 Fiddle