상품 리스트 가로로 3개씩 출력하기
본문
안녕하세요.
리스트 상에서 상품을 한줄로 세로로 나오는 것을 가로로 3개씩 출력시키고 싶은데
잘 안됩니다.
css에서 제어를 해야하는건지 쿼리문을 손대야하는지 봐주시면 감사하겠습니다.
즐거운 하루되세요^^
==========================================================
<!-- PRODUCT LIST//S -->
<div class="product-list">
<!-- ROW//S -->
<?php $sql="select * from g5_shop_item where t_code='10'";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) { ?>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-6 mb-3">
<div class="card">
<img src="./common/images/dummy_goods_01.png" class="card-img-top img-fluid" alt="상품이미지">
<div class="card-body text-center">
<h6 class="card-title mb-1"><? echo $row['it_name']?></h6>
<p class="text-violet mb-0"><? echo $row['it_price']?>원</p>
<div class="hidden-layer">
<h5 class="text-white">
<a href="./detail.html">Product 02</a>
</h5>
<div class="hidden-layer-inner">
<dl class="row mb-0">
<dt class="col-7 text-right">
<a href="#">Add to cart <i class="fas fa-chevron-right"></i></a>
</dt>
<dd class="col-5">
<a href="#"><i class="far fa-heart"></i></a>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- ROW//E -->
</div>
<!-- PRODUCT LIST//E -->
<? } ?>
답변 2
for ($i=0; $row=sql_fetch_array($result); $i++) {
if($i && $i%3==0){
?>
<div style="clear:both;"></div>
<?php }?>
<div class="row" style="width:33%;float:left;">
<div class="col-lg-4 col-sm-4 col-xs-6 mb-3">
<div class="card">
<img src="./common/images/dummy_goods_01.png" class="card-img-top img-fluid" alt="상품이미지">
<div class="card-body text-center">
<h6 class="card-title mb-1"><? echo $row['it_name']?></h6>
<p class="text-violet mb-0"><? echo $row['it_price']?>원</p>
<div class="hidden-layer">
<h5 class="text-white">
<a href="./detail.html">Product 02</a>
</h5>
<div class="hidden-layer-inner">
<dl class="row mb-0">
<dt class="col-7 text-right">
<a href="#">Add to cart <i class="fas fa-chevron-right"></i></a>
</dt>
<dd class="col-5">
<a href="#"><i class="far fa-heart"></i></a>
<a href="#"><i class="fas fa-shopping-cart"></i></a>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- ROW//E -->
</div>
<!-- PRODUCT LIST//E -->
<? } ?>
기본적으로 bootstrap을 사용하고 계신거 같은데
for ($i=0; $row=sql_fetch_array($result); $i++) { ?>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-6 mb-3">
<div class="card">
아래의 row class의 div를 for문 밖으로 빼주세요 그럼 해결될거 같네요
<div class="row">