如何使一个内联块元素填充剩余的行?

这样的事情是可能的使用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>

它生成一个左列，其宽度为固定宽度(而不是百分比宽度)，以及一个右列，其展开以填充该行上的剩余空间。听起来很简单，对吧?此外，由于没有任何东西被“浮动”，父容器的高度会适当地扩展以包含内容的高度。

< p > ——开始咆哮 < br > 我见过固定宽度边栏的多栏布局的“明确修复”和“圣杯”实现，它们很糟糕，而且很复杂。它们颠倒了元素的顺序，使用百分比宽度，或者使用浮动、负边距，“左”、“右”和“边距”属性之间的关系很复杂。此外，布局是亚像素敏感的，因此即使添加一个像素的边框、填充或边距也会破坏整个布局，并将整个列换行到下一行。例如，即使你试图做一些简单的事情，比如把4个元素放在一行上，每个元素的宽度设置为25%，四舍五入错误也是一个问题 ——结束咆哮——< / >强

我尝试过使用“inline-block”和“white-space:nowrap;”，但问题是我不能让第2个元素填充行上的剩下的空间。将width设置为“width:100%-(LeftColumWidth)px”在某些情况下可以工作，但在width属性中执行计算实际上是不支持的。

151275 次浏览
小开

看到的: 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>

为什么我在.right上用overflow: hidden替换margin-left: 100px ?< / >

小开

兼容常见的现代浏览器(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 /workaround，你可以使用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>

http://jsfiddle.net/ys2eogxm/

小开

使用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>

http://jsfiddle.net/m5Xz2/100/

小开

当你放弃内联块

.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;
}

http://jsfiddle.net/RXrvZ/3731/

(从CSS浮动:将图像浮动到文本的左边)

小开

您可以在流体元素上使用calc (100% - 100px)，同时为这两个元素使用display:inline-block。

注意，标签之间不应该有任何空间，否则在你的计算中也必须考虑这个空间。

.left{
display:inline-block;
width:100px;
}
.right{
display:inline-block;
width:calc(100% - 100px);
}




<div class=“left”></div><div class=“right”></div>

简单的例子:http://jsfiddle.net/dw689mt4/1/

小开

我已经使用flex-grow属性来实现这个目标。你必须为父容器设置display: flex，然后你需要为你想要填充剩余空间的块设置flex-grow: 1，或者就像评论中提到的tanius一样设置flex: 1。

小开

如果像我一样，即使左边的方框换行，也想要扩展到行尾，那么JavaScript是唯一的选择。

我会使用calc功能来得到这个正确的:

Array.from(document.querySelectorAll(".right")).forEach((el) => {
el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`;
});
.container {
outline: 1px solid black;
}


.left {
outline: 1px solid red;
}


.right {
outline: 1px solid green;
}
<div class="container">
<span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span>
<input class="right" type="text" />
</div>

小开

使用网格布局和分数单位(fr)的解决方案:

/* For debugging and visibility */
html, body {
border: 2px  solid navy;
}
.grid-layout {
border: thick solid sandybrown;
background-color: gray;
}
.grid-layout div:nth-child(odd) {
border: 2px solid brown;
background-color: azure;
}
.grid-layout div:nth-child(even) {
border: 2px solid red;
background-color: lightyellow;
}


/* Grid layout.
* Horizontal and vertical gaps.
* two columns, fixed and responsive.
* Note no containing div per line.
*/
.grid-layout {
display: grid;
gap: 4px 2px ;
grid-template-columns: 100px 1fr;
}
<p>How to make an element fill the remainder of the line?</p>
<p>Note no encompassing div per line.</p>


<div class="grid-layout">
<div>Lorem ipsum line 1</div>
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</div>
<div>Lorem ipsum line 2</div>
<div>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>
</div>

包含div的类似解决方案:

 .lineContainer {
display: grid;
gap: 2px 4px;
grid-template-columns: 100px 1fr;
}
<p>Display grid per line.</p>
<div class="lineContainer">
<div style="border:1px solid black; ">
Lorem ipsum &hellip;
</div>
<div style="border:1px solid black; ">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</div>
</div>


提交答案