[英]How can i make 3 div in first row and 2 div in second row?
如何在第一行制作 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>
您也可以使用 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 寬度,此處的結果可能不准確
實際結果:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.