使用CSS和两个内联块（或其他）DIV标签而不是使用表格可以实现这样的事情吗？
表格版本是这样的（添加了边框以便您可以看到它）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
它生成一个左列，其中包含固定宽度（不是百分比宽度），以及扩展以填充的右列剩余空间在线上。听起来很简单，对吧？此外，由于没有任何东西是“浮动的”，因此父容器的高度会适当地扩展以包含内容的高度。
--开始咆哮--
我已经看到了具有固定宽度侧列的多列布局的“明确修复”和“圣杯”实现，它们很糟糕而且很复杂。它们反转元素的顺序，使用百分比宽度，或者使用浮动、负边距，并且“左”、“右”和“边距”属性之间的关系很复杂。此外，布局对子像素敏感，因此即使添加单个像素的边框、填充或边距也会破坏整个布局，并将整个列换行到下一行。例如，即使您尝试做一些简单的事情（例如将 4 个元素放在一行上，并将每个元素的宽度设置为 25%），舍入误差也是一个问题。
--咆哮结束--
我尝试过使用“inline-block”和“white-space:nowrap;”，但问题是我无法让第二个元素填充其余的线上的空间。在某些情况下，将宽度设置为“width:100%-(LeftColumWidth)px”之类的值会起作用，但实际上并不支持在宽度属性中执行计算。
See: http://jsfiddle.net/qx32C/36/
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 20px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
为什么我换了margin-left: 100px with overflow: hidden on .right?
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
