关于css：如何使内联块元素填充该行的其余部分？


How to make an inline-block element fill the remainder of the line?

使用CSS和两个内联块(或其他)DIV标记而不是使用一个表，这是可能的吗？

表格版本如下(添加边框以便您查看)：

1
2
3
4
5
6
7
8
9
10
11
12
<!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"可以工作，但实际上不支持在width属性中执行计算。

相关讨论
1
2
    left
    right

为什么一个在.rightreplace margin-left: 100pxoverflow: hidden？编辑：这是两个镜子上面的链接：(死)

  • archive.is
  • web.archive.org
  • http：／／制作／# colinaarts-com.herokuapp.com for花车室/文章/魔法学院溢出隐藏
相关讨论

解决方案：一个现代flexbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}
1
 

jsfiddle.net http：/ / / / / m5xz2 100

相关讨论

兼容普通的现代浏览器(IE 8 +)：http：/ / / / / 3 m5xz2 jsfiddle.net

1
2
3
4
5
6
7
8
9
10
11
12
13
.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}
1
2
    left
    right

相关讨论

你可以使用Calc(100% 100px)在流体的元素，以及一个显示：内联块的两个元素。

在意识到我不应该是任何空间之间的标签，否则你将不得不认为，空间在你的钙。

1
2
3
4
5
6
7
8
.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}

快速的例子：http：/ / / 1 / / dw689mt4 jsfiddle.net

当你放弃的内嵌块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

jsfiddle.net http：/ / / / / 3 rxrvz

(从CSS浮动：浮动图像到左的文本)

如果你不能使用overflow: hidden(因为你不想overflow: hidden)或如果你喜欢CSS Hacks /变通方法，你可以使用JavaScript而不是。注意，它可能需要做的工作，因为它的JavaScript。

1
2
3
4
5
6
7
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";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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
}
1
 

jsfiddle.net http：/ / / / ys2eogxm