2

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

说，我有一个包含元素需要分成两列，可以这么说：

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

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

你是怎么做到的？我一直在搞乱浮动、内联块和宽度，但是当我调整浏览器窗口的大小时它总是搞砸了？

4

2 回答 2

2

这相对容易 - 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

于 2012-06-15T18:51:38.013 回答
0

据我所见（并且我已经做了一些查看），最好的实现（不使用 javascript）使用浮动和边距的组合来实现您想要的固定流体布局。然而，即使在这个实现中，包含的 div 仍然不会 100% 地反映正确的高度。

小提琴示范

[来源]

于 2012-06-15T22:27:34.327 回答