Question

我为我的新项目制作了一个小的CSS网格框架但不久之后，我意识到它有一些缺点。问题是，列不占据行的整个高度，这反过来又阻止我创建“块状”布局，并且使用当前设置我无法通过CSS实现此目的。

我用一些JavaScript解决了这个问题，但让我感到困扰的是，在页面加载后需要执行这种代码安静。这意味着如果要加载大量内容，布局会有点混乱。

另外，我对JavaScript不太满意，所以我不确定我是否做得恰到好处。

以下是CodePen

上的源代码链接

[注] 我不想使用任何JavaScript库

Answer 1

您可以尝试使用css table显示属性堆栈，并在必要时使用javascript作为不支持的浏览器的后备。

  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;

http://codepen.io/anon/pen/LEniv

Browser compatibility

Answer 2

http://jsfiddle.net/cDZpA/

.container { 
    position: relative;
    font-size: 0px;  
    overflow: hidden;
}
.col { 
    display: inline-block;
    width: 33.333%;
    font-size: 14px; 
    vertical-align: top;
    height: 100%;
    position: relative;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

.c1 { background: yellow; }
.c2 { background: purple; }
.c3 { background: red;  }

不要问我怎么做，但这段代码我已经放下了作品。

此处您的CodePen已修复： http://codepen.io/anon/pen/wkbrj

使用JavaScript计算CSS网格中的行高

2 个答案: