如何使内嵌块元素填充行的其余部分？
这样的事情可能使用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的现代解决scheme：
.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>
如果你不能使用overflow: hidden （因为你不想overflow: hidden ），或者如果你不喜欢CSS hack /变通方法，你可以使用JavaScript代替。 请注意，它可能无法正常工作，因为它是JavaScript。
var parent = document.getElementsByClassName("lineContainer")[0]; var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; right.style.width = (parent.offsetWidth - left.offsetWidth) + "px"; window.onresize = function() { right.style.width = (parent.offsetWidth - left.offsetWidth) + "px"; }
.lineContainer { width: 100% border: 1px solid #000; font-size: 0px; /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */ } .lineContainer div { height: 10px; display: inline-block; } .left { width: 100px; background: red } .right { background: blue }
<div class="lineContainer"> <div class="left"></div> <div class="right"></div> </div>
