从 3 列的行中创建一个 2 列的响应断点 [英] Make a 2 column responsive breakpoint from rows of 3 columns
本文介绍了从 3 列的行中创建一个 2 列的响应断点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两行,每行都包含树列.在响应断点上,我想切换到两列的树线.
由于初始结构,这似乎不可能(我只能制作 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屋!
查看全文