상품리스트 레이아웃 no flex -- responsive
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> div.best_goods{ padding: 15px; /* 패딩값은 간격을 보고 적당히 조절 */ max-width: 1100px; width:80%; border: 1px solid #ccc; box-sizing:border-box; margin:0 auto; overflow:hidden; } div.best_goods_item{ float: left; background-color: #eee; border: 1px solid #898989; border-radius: 11px; padding: 20px; min-height:220px; 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; } @media (max-width: 1920px) and (min-width:1024px) { /* 1줄 4개일때 */ div.best_goods_item:nth-child(4n+1){ margin-left: 0; } } @media (max-width: 1024px) and (min-width:600px) { div.best_goods_item{ width: 32%; margin-left:2%; } /* 1줄 3개일때 */ div.best_goods_item:nth-child(3n+1){ margin-left: 0; } } @media (max-width: 600px) and (min-width:320px) { div.best_goods_item{ width: 48%; margin-left:4%; } /* 1줄 2개일때 */ div.best_goods_item:nth-child(2n+1){ margin-left: 0; } } @media (max-width: 320px) { div.best_goods_item{ width: 100%; margin-left:0%; } /* 1줄 2개일때 */ div.best_goods_item:nth-child(1n+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 class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</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 class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</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 class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</div> </div> </BODY> </HTML>
상품 리스트 레이아웃 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>
상품리스트 레이아웃 no 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; } div.best_goods_item{ float: left; background-color: #eee; border: 1px solid #898989; border-radius: 11px; padding: 20px; min-height:220px; 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 class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</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 class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</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 class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</div> </div> </BODY> </HTML>
