Question

我使用float：left有8个div并排。它们每个都有一定的设定宽度。我想做的是让最后一个div占用剩余的可用宽度。

例如，

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

我用100px设置前7个div。但是最后一个我想自动计算到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 ..

Answer 2

如果您不需要支持＆lt;可以使用calc（） IE 9或非基于webkit的Opera版本。

#lastObject {
  width: calc(100% - 700px);
}

当然，假设每个div为100px，你有七个。

小提琴：http://jsfiddle.net/CgNAn/2/

（另外，div不能为此工作，请告诉我这是否是一个问题）

Answer 3

将所有8个div放在一个固定宽度的大div中并进行数学计算，使它们都保持宽度。

如何设置一个div来占用剩余可用空间而不包装父div？

3 个答案: