从 3 列的行中创建一个 2 列的响应断点 [英] Make a 2 column responsive breakpoint from rows of 3 columns

问题描述

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

由于初始结构，这似乎不可能(我只能制作 1 列行或树列行，而不是两列行).

请不要使用 JS...

这通常是如何解决的?此处演示

CSS

.col {向左飘浮;宽度:33.33%；背景:红色；文本对齐:居中；}@media(最大宽度:500px){.col{宽度:50%；}}

HTML

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

解决方案

试试这个代码

.contain {显示:弹性；flex-wrap: 包裹;}.col{弹性:1；最小宽度:33%；}@media(最大宽度:500px){.col{最小宽度:50%；}}

<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>

I have two rows containing tree columns each. On a Responsive breakpoint, I'd like to switch to tree lines of two columns.

Due to the initial structure, this does not seem possible (I can only make 1 colum rows, or tree column rows, bot not two column rows).

No JS please...

How is this usually solved? 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>

解决方案

Try this code

.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 列的响应断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！