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

我只是想了解使用CSS和表的好处，但到目前为止我还不确定。我能在一分钟内用一个表做的事情似乎不太容易用CSS（至少在这一点上对我来说是这样。）所以，这个问题不是关于使用CSS和表的优点。我需要知道如何使用CSS执行以下操作：

比如说，我有一个包含元素，需要分为两列，也就是说：

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

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

那你怎么做呢？我一直在处理浮动、内联块和宽度，但当我调整浏览器窗口的大小时，它总是会变得一团糟？

这相对容易-

而且，除了表格数据，您还必须忘记在布局和其他方面使用表格。当您习惯于无表布局时，您会喜欢它们。从语义上讲，这是正确的解决方案

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

据我所见（我做了一些研究），最好的实现（不使用javascript）使用float和margin的组合来实现您想要的固定流体布局。然而，即使在这个实现中，包含的div仍然不能100%地反映正确的高度。

---

嗯，这对你来说很容易：）谢谢。你很快就会变得容易：）只要开始，你就会see@ahmd0正如大家所知，这个解决方案背后的“魔力”是绝对定位。如果你做任何后续阅读，请记住这一点。如果移除

浮动：左#idLeft

的code>语句，它仍将正确呈现，因为它未被使用。只是为了避免混淆。除非为iOuter指定了一个固定的高度，否则这可能无法在跨浏览器中可靠地工作。如果不这样做，浏览器将试图根据另一列的100%高度（即100%的高度？100%的高度…）来计算#idOuter和列的高度。我发现，如果#idOuter没有固定的高度，它将采用最后一列的高度（好坏取决于哪个列的内容更高）。在FF、Chrome、IE9中测试。这要归功于@Dirk de Man发布的链接。这只是因为他从来没有发布过答案…谢谢发布。所以出于好奇，如果用CSS做这个简单的布局会带来这么多问题，为什么人们会用表格来做这个布局？我认为人们说坏话是对表格的过度依赖s、 因为作为一个完整页面设计的平台，它们既笨重又过时。当你第一次收到一个灾难性的布局，其中包含嵌入在表中的表，并且要求你进行任何改进/更改/添加内容时，你就会确切地知道人们为什么抱怨。CSS作为一个也就是说，表仍然有一些很好的用途，而您当前的项目似乎就是其中之一。

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

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

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