Question

我有一个内联div abc和另一个内联div def。 abc的宽度为100px。如果def的宽度是其父级的宽度减去100px，我怎样才能让def出现在右侧？

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

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

Answer 1

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

DEMO：https://jsfiddle.net/h7k87vwx/6/

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

inline-block boxes not fitting in their container

答案 1 :(得分：1)

这是圣杯布局中常用的旧技巧：

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

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

查看fiddle。

答案 2 :(得分：0)

我想你想做：

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

答案 3 :(得分：-1)

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

link

Answer 2

这是圣杯布局中常用的旧技巧：

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

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

查看fiddle。

Answer 3

我想你想做：

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

Answer 4

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

link

如何使元素占据容器的剩余宽度？

4 个答案: