HTML创建了包含div中内容的2行

Question

对HTML和编码相当陌生。。我遇到了一个盒子的问题，需要将里面的8个项目显示为2行：

我在一个div(class="example_box"(中有8个div(class="item_css"(，如何在2行中显示这8个项，因此它显示一行4个，然后显示另一行4。我想避免使用"rows"类。最好的方法是什么？

CSS

* {
margin: 0;
padding: 0;
}

.body_background {
background-color: bisque;
}

.example_banner {
background-color: rgb(247, 245, 245);
height: auto;
width: 100%;
margin: 3% auto;
padding: 4% 0%;
box-shadow: 0px 2px 5px #cccccc;
}

.example_banner_label {
text-align: center;
margin: 2px auto 25px;
}

.example_banner_heading {
font-size: 30px;
text-align: center;
margin: 0% auto;
color: rgb(7 29 148);
text-shadow: 1px 1px #c7c7c7;
}

.example_banner_box {
width: 90%;
height: auto;
margin: 0% auto;
padding: 0%;
}

.example_banner_frame {
display: flex;
position: relative;
height: auto;
width: 1200px;
margin: 0% auto;
padding: 0px;
text-align: center;
background-color: #ffffff;
border: 1px solid #b7b7b7;
}

.example_banner_frame_maincontents {
width: 300px;
height: 450px;
}

div.example_consumer_banner {
width: 300px;
height: 60px;
padding: 10px;
font-size: 25px;
margin: 0%;
text-align: center;
color: white;
background-color: #193cad;
}

.example_consumer_img_label {
width: 20%;
position: absolute;
top: 25%;
left: 10%;
transform: translate(-50%, -50%);
font-size: 25px;
font-family: "Montserrat", sans-serif;
text-align: center;
color: rgb(255 255 255);
text-decoration: none;
text-shadow: -3px 4px 3px rgb(0 0 0);
}

.example_box {
width: 75%;
height: 450px;
background-color: #00b6f3;
}

.item_css {
width: 25%;
height: 150px;
margin: 0%;
padding: 3px;
}

HTML

<section class="main_body">
<div class="body_background">
<div class="row" id="merch_rows">
<div class="example_banner">
<div class="example_banner_frame">
<div class="example_banner_frame_maincontents">
<div class="example_consumer_banner" for="">Lorem ipsum</div>
<img src="" class="example_consumer_picture">
<label class="example_consumer_img_label" for="example_consumer_picture">Lorem ipsum dolor sit amet consectetur </label>
</div>
<div class="example_box">
<div class="item_css" style="color: red; border: 1px solid grey;">1
</div>
<div class="item_css" style="color: orange;border: 1px solid grey;">2
</div>
<div class="item_css" style="color: green;border: 1px solid grey;">3
</div>
<div class="item_css" style="color: yellow;border: 1px solid grey;">4
</div>
<div class="item_css" style="color: blue;border: 1px solid grey;">5
</div>
<div class="item_css" style="color: black;border: 1px solid grey;">6
</div>
<div class="item_css" style="color: grey;border: 1px solid grey;">7
</div>
<div class="item_css" style="color: pink;border: 1px solid grey;">8
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

只是flexbox上的一个简单示例：

.example_box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item_css {
width: 24%;
margin-bottom: 10px;
}

或网格：

.example_box {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

Answer 2

Flexbox可以做到这一点。

https://jsfiddle.net/za678wcL/

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

.container {
display: flex;
flex-wrap: wrap;
}
.box {
background-color: green;
height: 50px;
width: calc(25% - 20px);
margin: 10px;
}