我正在尝试使用以下 html 在一行中显示 4 个框。所以一排应该有 4 个盒子。我总共有 8 个盒子,将有 2 行 4 列。
<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
但是 support因为目前该属性值很差或有问题。
.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>
关于html - 使用 flexbox 连续显示 4 个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59058774/