CSS Div 与 children 的行为类似于 table，使一个 child 填充宽度

Question

所以我有一个 <div> 和 display:table;，它有 10 个 children（计数可能会有所不同，children 可能是按钮或输入）display:table-cell; 并且我已经设置了除一个之外的所有 children 的宽度。我要最后一个children没有固定宽度的来填满宽度

例如，假设 parent <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;}

//编辑：我要填充 space 的元素是 div.username

Answer 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>

CSS Div 与 children 的行为类似于 table，使一个 child 填充宽度

CSS Div with children behaving like table, making one child to fill width

html

css

html-table

css-tables