使用flexbox连续显示4个div [英] show 4 divs in a row using flexbox
本文介绍了使用flexbox连续显示4个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用html下面的一行显示4个框。因此,一排应该有4个盒子。我总共有8个盒子,会有2行和4列。
I am trying to show 4 boxes in a line using below html. So One row should have 4 boxes. I have total 8 boxes, there will be 2 rows with 4 columns.
<div class="parent">
<div class="child box1">A Child</div>
<div class="child">
<div class="box2">B Child 1</div>
<div class="box3">B Child 2</div>
<div class="box4">B Child 3</div>
<div class="box5">B Child 4</div>
<div class="box6">B Child 5</div>
<div class="box7">B Child 6</div>
</div>
<div class="child box8">C Child</div>
</div>
应该看起来像这样
A-Child Child1 Child2 Child3
Child4 Child5 Child6 C-Child
我尝试过的CSS
.parent {
display: flex;
flex-wrap: wrap;
}
.parent>.child {
flex: 1 1 20%;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
height:100px;
width:100px;
border:10px solid red;
}
推荐答案
使用 display:contents
但是 支持 ,因为该属性当前的价值不佳或有故障。
This is possible with display:contents
but support for that property value is poor or buggy at present.
.parent {
display: flex;
flex-wrap: wrap;
}
.open {
display: contents;
}
.box {
height: 100px;
width: 25%;
border: 3px solid red;
box-sizing: border-box;
}
<div class="parent">
<div class="child box">A Child</div>
<div class="child open">
<div class="box">B Child 1</div>
<div class="box">B Child 2</div>
<div class="box">B Child 3</div>
<div class="box">B Child 4</div>
<div class="box">B Child 5</div>
<div class="box">B Child 6</div>
</div>
<div class="child box">C Child</div>
</div>
这篇关于使用flexbox连续显示4个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文