如何使一个inline-block元素填充剩余行？ [英] How to make an inline-block element fill the remainder of the line?
问题描述
这样的事情可能使用CSS和两个内联块（或任何）DIV标签，而不是使用表？
Is such a thing possible using CSS and two inline-block (or whatever) DIV tags instead of using a table?
表版本是这所以你可以看到它）：
The table version is this (borders added so you can see it):
<!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>
它会产生一个左栏，其中包含 FIXED WIDTH ），以及展开以填充剩余空间的右列。听起来很简单，对吧？此外，由于没有浮动，父容器的高度适当地扩展以包含内容的高度。
It produces a left column with a FIXED WIDTH (not a percentage width), and a right column that expands to fill THE REMAINING SPACE on the line. Sounds pretty simple, right? Furthermore, since nothing is "floated", the parent container's height properly expands to encompass the height of the content.
- BEGIN RANT -
我看到了具有固定宽度列的多列布局的清除修复和圣杯实现，它们很吸引人，而且很复杂。它们反转元素的顺序，它们使用百分比宽度，或者使用浮点，负边距，并且左，右和边缘属性之间的关系是复杂的。此外，布局是子像素敏感的，所以甚至添加边框，填充或边距的单个像素将打破整个布局，并发送整个列包装到下一行。例如，即使您尝试做一些简单的操作，例如在一行上放置4个元素，每个元素的宽度设置为25％，舍入错误也是一个问题。
- END RANT -
我试过使用inline-block和white-space：nowrap;，但问题是我只是无法获得第二个元素填充剩余的空格就行了。将宽度设置为width：100％ - （LeftColumWidth）px在某些情况下可以工作，但在width属性中执行计算并不真正支持。
I've tried using "inline-block" and "white-space:nowrap;", but the problem is I just can't get the 2nd element to fill the remaining space on the line. Setting the width to something like "width:100%-(LeftColumWidth)px" will work in some cases, but performing a calculation in a width property is not really supported.
推荐答案
请参阅： http://jsfiddle.net/qx32C/36 /
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 10px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
为什么我替换 left：100px 与 overflow：hidden 于 .right ？
EDIT：以下是上述（死的）链接的两个镜像：
- archive.is
- web.archive.org
这篇关于如何使一个inline-block元素填充剩余行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
