响应式，桌面视图中 3 列，移动视图中 2 列

Question

当用户有手机时，如何将 3 列缩放为两列。我可以了解很多有关媒体查询的信息，但我不知道该怎么做。像这样：

http://postimg.org/image/sox89ekqj/

Answer 1

我将给你举两个例子来说明如何做到这一点，因为有很多方法可以实现你想要的。

使用display:table 和display:table-cell

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  display: table;
  width: 100%
}
div {
  display: table-cell;
  border: 1px solid red;
  padding: 5px;
  width: 33%;
  height: 200px
}

@media(max-width:480px){
div {
  width: 50%
}
div:last-child {
  display: none
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

使用display:inline-block

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  font-size:0
}
div {
  display: inline-block;
  border: 1px solid red;
  padding: 5px;
  width: 33.3%;
  height: 200px
}

@media(max-width:480px){
div {
  width: 50%
}
div:last-child {
  display: none
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

编辑

由于 OP 的评论，margins 的可能解决方案。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  border: 2px solid green;
  height: 204px;
}
div {
  float: left;
  background-color: red;
  margin-right: 2%;
  width: 32%;
  height: 200px
}
div:last-child {
  margin-right: 0
}
@media(max-width:480px){

div {
  width: 49%
}
div:nth-child(2) {
  margin-right: 0;
}
div:last-child {
  display: none;
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

Answer 2

使用 Twitter Bootstrap，这就是它的完成方式

使用col-**-4 为桌面版定义3 列的部分，然后为移动版使用col-**-6。当总列数超过 12 列时，它会将第 12 列上的所有内容换行。