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

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

QA

상품 리스트 가로로 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">

 

답변을 작성하시기 전에 로그인 해주세요.
전체 128
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT