块元素填充行的其余部分？
这样的事情可能使用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>
它会生成一个带有固定宽度 （不是百分比宽度）的左列，以及一个扩展的右列以填充线上的剩余空间 。 听起来很简单，对吧？ 此外，由于没有任何内容被“浮动”，所以父容器的高度恰当地扩展以包含内容的高度。
--BEGIN RANT--
我已经看到了具有固定宽度侧栏的多列布局的“明确修复”和“圣杯”实现，并且它们很吸引，而且它们很复杂。 它们颠倒元素的顺序，使用百分比宽度，或者使用浮动，负边距，“左”，“右”和“边距”属性之间的关系很复杂。 此外，这些布局对子像素敏感，因此即使添加边框，填充或边距的单个像素也会打破整个布局，并将整个列封装到下一行。 例如，即使你试图做一些简单的事情，舍入错误也是一个问题，比如把4个元素放在一行上，每个元素的宽度设置为25％。
--END RANT--
我尝试过使用“内联块”和“空白：nowrap;”，但问题是我无法获得第二个元素来填充行上的剩余空间。 在某些情况下将宽度设置为“width：100％ - （LeftColumWidth）px”可以工作，但在width属性中执行计算并不真正支持。
请参阅： 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>使用Flexbox的现代化解决方案：
.container {
display: flex;
}
.container > div {
border: 1px solid black;
height: 10px;
}
.left {
width: 100px;
}
.right {
width: 100%;
background-color:#ddd;
}<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>与常见的现代浏览器兼容（IE 8+）：http://jsfiddle.net/m5Xz2/3/
.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
border:1px solid black;
height:10px;
}
.left {
width:100px;
} <div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>