响应多项流--除前两行外，最后一行有两条。

Question

情况

假设我有五个同尺寸的div，但只有四个在最大宽度时并排匹配。

CSS：

.container {
  max-width: 320px;
  text-align: center;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
}

HTML：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

在这里跑。

错误的答案

在最大宽度，我们有：

-

与其把最后一项单独放在一排，我想保持它与顶部三项和底部两项保持平衡：

那部分很容易..。除非我希望这一页能有效地工作。如果我在第三项和第四项之间添加一个断点，或者将最后两个项用一个div括起来:两者或类似的东西，当宽度进一步减小时，线在2-1-2处会不自然地中断：

-

目标

在全宽度，我希望第三和第四项下降到第二行(3-2)。在中等宽度，我希望项目下降，因为他们会自然，2-2-1。当然，在最小宽度，它应该是每一行一个(1-1-1-1-1)。

我怎么能这么做？

Answer 1

最后，我将最后两项包装在div中，并使用@media将div设置为display: inline表示某些浏览器宽度。

你可以在这里看到它的作用。

CSS：

.container {
  max-width: 420px;
  text-align: center;
  margin: 0 auto;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: green;
}

@media only screen and (max-width: 323px) {
  div.lastrow {
    display: inline;
  }
}

HTML：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="lastrow">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>