2

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

我已经用一些 JavaScript 解决了这个问题，但让我烦恼的是，这种和平的代码需要在页面加载后执行。这意味着如果要加载很多内容，布局会有点混乱。

另外，我对 JavaScript 不是很好，所以我不确定我是否正确地做到了这一点。

这是CodePen上的源代码链接

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

4

2 回答 2

1

如果需要，您可以尝试使用 csstable显示属性堆栈并使用 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

浏览器兼容性

于 2013-09-03T09:38:18.013 回答
0

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

于 2013-09-03T11:12:43.490 回答