Question

我有两行，每行包含树列。在响应断点上，我想切换到两列的树线。

由于初始结构，这似乎不可能（我只能制作1列的行，或树列行，机器人而不是两列行）。

没有JS请...

这通常如何解决？ DEMO HERE

CSS

.col {
  float: left;
  width: 33.33%;
  background: red;
  text-align: center;
}

@media (max-width:500px) {
  .col {
    width: 50%;
  }
}

HTML

<div class="row" style="overflow:auto;">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

<div class="row" style="overflow:auto;">
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

Answer 1

试试此代码

.contain {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  min-width: 33%;
}

@media (max-width:500px) {
  .col {
    min-width: 50%;
  }
}

<div class="contain">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

从3列的行中创建2列响应断点

1 个答案: