html - 按最后一个元素填充行中的剩余空间

Question

我有这样的东西:

.container {
  width: 350px;
  border: 1px solid black;
}

.item {
  display: inline-block;
  padding: 10px 20px;
  background-color: green;
}

<div class="container">
  <div class="item">
    Item 1
  </div><div class="item">
    Item 2
  </div><div class="item">
    Item 3
  </div><div class="item">
    Item 4
  </div><div class="item">
    Item 5
  </div>
</div>

我需要让最后一个元素填充行中的剩余空间。元素应按顺序放置。

(对不起我的谷歌翻译...:( )

Answer 1

您可以使用 css3 flexbox :

.container {
  flex-wrap: wrap;
  display: flex;
}
.container .item {
  /* This property will expand the last item to the remaining width */
  flex-grow: 1;
}

.container {
  flex-wrap: wrap;
  width: 350px;
  display: flex;
}

.item {
  border: 1px solid #000;
  background-color: green;
  padding: 10px 20px;
  flex-grow: 1;
}

<div class="container">
  <div class="item">
    Item 1
  </div><div class="item">
    Item 2 Item 2 Item 2
  </div><div class="item">
    Item 3
  </div><div class="item">
    Item 4
  </div><div class="item">
    Item 5
  </div>
</div>