所以我有一个<div>with display:table;，它有10个孩子（数量可能有所不同，孩子可能是按钮或输入项），display:table-cell;并且我已经设置了除一个以外的所有孩子的宽度。我希望最后一个没有固定宽度的孩子来填充宽度。
例如，假设父对象的<div>宽度为600px，有4个按钮，每个按钮的宽度为40px，我希望第五个元素的宽度为440px，而无需静态设置。
到目前为止，这是我所做的：
HTML：
<div class="table">
<button class="show"></button>
<div class="id">TEXT</div>
<div class="username">TEXT</div>
<div class="dob">TEXT</div>
<button class="edit"></button>
<button class="delete"></button>
</div>
和CSS：div
.table {
display:table;
width:100%;
height:40px;
}
div.table > * {
display:table-cell;
height:40px;
line-height:40px;
}
div.table > button {width:64px;}
div.table > div.id {width:48px;}
div.table > div.dob {width:128px;}
//编辑：我要填充空间的元素是 div.username
您可以使用flexbox轻松做到这一点
section {
display: flex;
max-width: 600px
}
div {
flex: 0 40px;
border: 1px solid red
}
div:last-of-type {
flex: 1
}<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句