html - 如何设置一个 div 以在不换行的情况下占用基于父 div 的剩余可用空间？

Question

我使用 float:left 并排放置了 8 个 div。他们每个人都有一定的设定宽度。我想要做的是让最后一个 div 占用剩余的可用宽度。

例如，

如果我的父 div 宽度为 810px。

我将前 7 个 div 设置为 100 像素。不过最后一个我想自动计算到110px。原因是如果出现滚动条，这个 div 会换行到下一行。我不希望它换行。

Answer 1

仅限现代浏览器:

HTML:

<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="last">8</div>
</div>

CSS:

.content {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background: red;
}

.content div {
-webkit-flex-basis: 50px;
margin: 5px;
display: -webkit-flex;
display: flex;
-webkit-flex-grow: 0;
flex-grow: 0;
}

.content .last {
-webkit-flex-grow: 1;
flex-grow: 1;
background: blue;
color: white;
}

和the Fiddle ..