Question

我有一个网格，在这个例子中有4个coloumns（宽度：25％）。这很好但是我需要列高度相等。内容将动态加载，因此我无法设置固定的高度。

我已经实现了flexbox，虽然这解决了高度问题，但它似乎忽略了百分比宽度。

以下是我的代码，这是指向代码集的链接... http://codepen.io/anon/pen/CEHgo

HTML

<div class="row">
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div>
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div>
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div> 
</div>

CSS

* {box-sizing:border-box}

.row {
margin-left: -1%;
margin-right: -1%;
margin-bottom: 1em;
display:flex;
}
.row:before,.row:after {
content: " ";
display: table;
}

.row:after {
clear: both;
}

.col3 {
position: relative;
float: left;
padding-left: 1%;
padding-right: 1%;
width:25%;
display:flex;
}

.box {
background:#ccc;
padding:15px;
margin-bottom:15px;
}

如何在仍然尊重色谱柱宽度的同时获得相同的高度颜色？

提前致谢

Answer 1

将flex-wrap: wrap;添加到.row并将width: 0;添加到.row:before, .row:after以修复Google Chrome上的第4列位置。

JSFiddle - DEMO

.row {
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1em;
    display:flex;
    flex-wrap: wrap;
}
.row:before, .row:after {
    content:" ";
    display: table;
    width: 0; /* Fix for Google Chrome */
}

Answer 2

您的代码可以大大清理。使用flexbox完全消除了对浮点数和清除修正的需求。看看下面的代码：

* {box-sizing:border-box}

.row {
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1em;
    display:flex;
    flex-wrap: wrap;
}

.col3 {
    padding-left: 1%;
    padding-right: 1%;
    width:25%;
    display: flex;
}

.box {
  background:#ccc;
  padding:15px;
  margin-bottom:15px;
}

演示：http://codepen.io/anon/pen/yswnG

Flexbox用于相同的高度，但它忽略了网格系统中的列宽

2 个答案: