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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
상품 리스트 가로로 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">

 

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

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