如何在第一行制作 3 个 div，在第二行制作 2 个 div？

Question

如何在第一行制作 3 个 div，在第二行制作 2 个 div？

这是当前的 output：

这是目标 output：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="gift-div"> <div class="row"> <div class="col-lg-4 col-md-4 col-6 col-padds"> <a href="giftred_detail.php?p="> <div class="div-size" style="background-color:transparent; border: 3px solid white; box-shadow: 0px 0px 70px 5px #FF0000, inset 0px 0px 150px 5px #FF0000;;"> <img src="img/gift/" alt="Item" class="jpo"> </a> <div class="container text-con" style="text-align:center"> <h4><b style="word-break:break-word"></b></h4> <p>Points</p> </div> </div> </div> </div> </div>

Answer 1

您也可以使用 CSS flex ：

 .boxes { display: flex; flex-direction: column; gap: 20px; width: 100%; }.row { display: flex; align-items: center; width: 100%; height: 200px; gap: 50px; flex-direction: row; justify-content: center; }.box { width: 200px; height: 200px; background-color: red; }

 <div class="boxes"> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> </div> </div>

注意：由于 IFRAME 宽度，此处的结果可能不准确

实际结果：

小提琴示例