<分区>
<分区>
所以我有一个 <div>与 display:table;它有大约 10 个 child (数量可能会有所不同， child 可能是按钮或输入)display:table-cell;我已经设置了所有 child 的宽度，除了一个。我想要最后一个没有固定宽度的 child 来填充宽度。
例如，假设父级 <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: 格
.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>关于html - 带有 child 的 CSS Div 表现得像表格，让一个 child 填充宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47737469/