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