상품 리스트 레이아웃 flex --자동높이조절
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> div.best_goods{ padding: 15px; /* 패딩값은 간격을 보고 적당히 조절 */ width: 1100px; border: 1px solid #ccc; box-sizing:border-box; margin:0 auto; overflow:hidden; display:flex; } div.best_goods_item{ float: left; background-color: #eee; border: 1px solid #898989; border-radius: 11px; padding: 20px; width: 23%; margin-left:2.666%; /* 1줄 3칸일때는 32%-2%, 1줄 4칸일때는 23%-2.666% */ text-align: center; box-sizing:border-box; margin-bottom:15px; } /* 1줄 3개일때 div.best_goods_item:nth-child(3n+1){ margin-left: 0; } */ /* 1줄 4개일때 */ div.best_goods_item:nth-child(4n+1){ margin-left: 0; } </style> </HEAD> <BODY> <div class="best_goods"> <div class="best_goods_item">inner box 1<br>222</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> </div> <div class="best_goods"> <div class="best_goods_item">inner box 1<br>222<br>333</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> </div> </BODY> </HTML>
