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>

Run it here.

错误的答案

在最大宽度，我们有：

□□□□
□

我不想将最后一项留在行上，而是要保持平衡，顶部有三个，底部有两个：

□□□
□□

这部分很容易......除非我希望页面能够起作用。如果我在第三个和第四个项目之间添加一个中断或者将最后两个包装在一个带有clear的div中：两者或类似的东西，当宽度进一步减小时，这些线条以2-1-2不自然地突破：

□□
□
□□

目标

全宽时，我希望第三和第四项落到第二行（3-2）。在中等宽度，我希望物品能够自然地落下，2-2-1。当然，在最小宽度时，它应该是每行一个（1-1-1-1-1）。

我该怎么做？

Answer 1

我最后将最后两个项目包装在div中并使用@media将该div设置为显示：内联某些浏览器宽度。

You can see it in action here.

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>

响应式多项目流 - 最后一行两个，除了前一行中的两个

1 个答案: