孩子们表现得像表格的CSS Div，让一个孩子填充宽度[重复]答案

【问题标题】：CSS Div with children behaving like table, making one child to fill width [duplicate]孩子们表现得像表格的CSS Div，让一个孩子填充宽度[重复]
【发布时间】：2018-05-24 01:31:40
【问题描述】：

所以我有一个<div> 和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

【问题讨论】：

一般来说，像button 这样的表单元素不喜欢显示为其他任何东西，所以如果你将它们包装在例如span，它将按原样工作：jsfiddle.net/e3j42ok7

标签： html css html-table css-tables

【解决方案1】：

你可以使用 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>

【讨论】：