이미지 격자 행 html 및 css

Question

모두, 설명이 포함 된 웹 사이트에 제품 표를 추가하려고합니다. 뭔가 Grid View이 마음에 드십니까? 나는 그것을 어떻게 할 것이냐? 어떤 도움이 필요합니까?

Answer 1

당신은 부트 스트랩 Grid System를 사용할 수 있습니다.

<div class="fluid-container"> 
    <div class="row"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    </div> 
    <div class="row"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
     <div class"col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    </div> 
</div> 

Quick Bootstrap CDN

Answer 2

부트 스트랩을 프로젝트에 연결 했습니까? 당신은 그리드 시스템을 사용하기 쉽고 사용하기 쉽습니다.

bootstrap grid system

<div class="row"> 
     <div class="col-sm-3"></div> 
     <div class="col-sm-3"></div> 
     <div class="col-sm-3"></div> 
     <div class="col-sm-3"></div> 
    </div>