상품 리스트 가로로 3개씩 출력하기

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
상품 리스트 가로로 3개씩 출력하기

QA

상품 리스트 가로로 3개씩 출력하기

답변 2

본문

안녕하세요.

 

리스트 상에서 상품을 한줄로 세로로 나오는 것을 가로로 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">

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1
© SIRSOFT
현재 페이지 제일 처음으로