Question

我想在顶部显示静态天真条，并将整个页面放入6列并增加行的网格中。

css：

http://grids.heroku.com/grid.css?column_width=182&column_amount=6&gutter_width=5

这是html：

<div class=container_6>
   <div class=grid_5>
   </div>    
 </div>

JSFIDDLE：http://jsfiddle.net/karimkhan/vpqvrxhn/1/

为什么显示页面看起来仍然是空的？

我正在关注此文档：http://1200px.com/

Answer 1

为什么显示页面看起来仍然是空的？

因为容器的高度是0px。您必须为Container的网格设置一些height。

我为1200px.com创建了6个网格容器，共6列 - TRY THIS DEMO

<强> HTML：

<div class=container_6>
   <div class=grid_1></div>   
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>  
</div>

<强> CSS：

/* ---------- Containers ---------- */

.container_6 {
    margin-left: auto;
    margin-right: auto;
    width: 1122px;
}
.grid_1 {
    background-color: #FF0000;
    height: 300px;
}

[EDITED]

根据您的评论：

我想将整个屏幕划分为6列和5行的网格。它应该响应任何设备。那可能吗？ - @ user2129623

尝试 - THIS DEMO

我已将padding: 5px 0px;和height: 20%;设置为.container_6，将整个屏幕划分为6列和5行的网格，您可以根据需要调整填充。

创建基于响应网格的网页

1 个答案:

[EDITED]

尝试 - THIS DEMO