如何让元素占据容器的剩余宽度？答案

【问题标题】：How to make element occupy remaining width of container?如何让元素占据容器的剩余宽度？
【发布时间】：2016-01-08 02:06:41
【问题描述】：

我有一个内联 div abc 和另一个内联 div def。 abc 的宽度为 100 像素。如何让def 出现在右侧，而def 的宽度是其父级宽度减去100px？

我不能做宽度：100%；因为def 会出现在下一行。

https://jsfiddle.net/h7k87vwx/

<div class="abc">abc</div>
<div class="def">def</div>
<div class="ghi">ghi</div>

.abc {
    display:inline-block;
    background-color:lightblue;
    width: 100px;
}

.def {
    display:inline-block;
    background-color: lightyellow;
    width: 200px;
}

【问题讨论】：

...只是为了澄清，您希望“def”的宽度是 body 的宽度减去 100px？
stackoverflow.com/questions/16529291/…
@frosty 是的，你是对的

标签： html css

【解决方案1】：

行内块元素之间会有一个空白空间，解决这个问题的一种方法是给它们一个负边距。这将使它不会被放置在下面。另一个细节是在不同的值和 calc() 的运算符之间保留一个空白空间，否则它将不起作用：

https://jsfiddle.net/t0ecucgw/

.abc {
    display: inline-block;
    background-color: lightblue;
    width: 100px;
}

.def {
    display: inline-block;
    background-color: blue;
    width: calc(100% - 100px);
    margin-left: -4px;
}

【讨论】：

【解决方案2】：

HTML

<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div>

CSS

.def {
    display: inline-block;
    background-color: lightyellow;
    width: calc(100% - 100px);
}

演示：https://jsfiddle.net/h7k87vwx/6/

Div 排列在一起以消除渲染的空白。有关解释，请参见我的答案：

inline-block boxes not fitting in their container

【讨论】：

在我发布我的答案之前甚至没有看到这个答案（或者它已经被接受）......不在文档中换行确实是消除空格的另一种方式。跨度>

【解决方案3】：

这是圣杯布局中常用的一个老技巧：

.abc {
    float: left;
    background-color:lightblue;
    width: 100px;
}

.def {
    padding-left: 100px; /* margin-left also applies */
    background-color: lightyellow;
}

查看fiddle。

【讨论】：

【解决方案4】：

我想你想做：

.def {
    width: calc(100% - 100px)
}

【讨论】：

jsfiddle.net/h7k87vwx/3 不行。我希望“def”覆盖它的其余部分，而不仅仅是覆盖这三个字符。
我比所有人都正确回答了这个问题，但不知何故我在底部:(。

【解决方案5】：

.def {
    float:right;
    background-color: lightyellow;
    width: 200px;
}

link

【讨论】：

这会将其浮动到右侧。但我希望宽度不是 200px，而是（体宽 - abc 的宽度）