如何使用純CSS，HTML和JavaScript自動布局網格？

Question

需要顯示一個3×3行和列卡 >=990px的網格布局系統。 而在>=760px 此屏幕截圖在<760 此屏幕截圖之后 。

但是，我嘗試了以下代碼片段：

<div id="plat-listing-main">
    <div class="section group">
        <div class="col span_1_of_3">
            This is column 1
        </div>
        <div class="col span_1_of_3">
            This is column 2
        </div>
        <div class="col span_1_of_3">
            This is column 3
        </div>
    </div>
</div> 

CSS：

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_1_of_3 {
  width: 32.2%;
  height: 200px;
  background-color: red;
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
/* .span_1_of_3 {
    width: 32.2%;
} */

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 990px) {
    .col { margin: 1% 0 1% 1.6%;}
  .span_1_of_3 { width: 49.2%; }
}

@media screen and (max-width: 760px) {
    .col { margin: 1% 0 1% 1.6%;}
  .span_1_of_3 { width: 100%; }
}

需要使此網格盡可能地響應。 不想僅出於學習目的而使用Bootstrap或任何其他框架。

任何幫助，將不勝感激！！

Answer 1

我建議您使用填充而不是邊距。 為了使其能夠使用填充，您需要放置另一個具有填充的div並使用原始div來設置內容的高度和寬度。

這是您的代碼示例，該代碼適應了我使用填充和一些寬度和高度來調整div的情況。

 .section { clear: both; padding: 0px; margin: 0px; } .col { display: block; float: left; } .span_1_of_3 { width: 32.2%; height: 200px; } .padding-div { padding: 1% 0 1% 1.6%; /*padding to make text look right*/ background-color: red; /*height and width so the divs are separated*/ height: 90%; width: 95%; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 990px) { .span_1_of_3 { width: 49.2%; } } @media screen and (max-width: 760px) { .span_1_of_3 { width: 100%; } } 

 <div id="plat-listing-main"> <div class="section group"> <div class="col span_1_of_3"> <div class="padding-div"> This is column 1 </div> </div> <div class="col span_1_of_3"> <div class="padding-div"> This is column 2 </div> </div> <div class="col span_1_of_3"> <div class="padding-div"> This is column 3 </div> </div> </div> </div> 

您也可以在這里查看JsFiddle的這個工作示例