HTML和CSS : div中的两个div高度相同

Question

首先，请原谅我糟糕的英语。但是我对CSS有一个问题。

我想在Div列的颜色块中设置相同的高度。

绿色积木与蓝色积木的高度不同。我想让它们在相同的高度。

区块：http://postimg.org/image/ej2jujnt1/

<div class=cols>
    <div class="col col-1-3">
        <div class="bloc">
    </div>
    <div class="col col-2-3">
        <div class="bloc">
        </div>
        <div class="bloc">
        </div>
    </div>
</div>

.cols {
    position: relative;
    clear: both;
}

.cols > .col-1-3, .cols > .col-1-3 + .col-1-3 + .col-1-3 {
    width: 307px;
}

.cols > .col {
    float: left;
}

.cols > .col + .col {
    margin-left: 14px;
}

.cols > .col-2-3 {
    width: 629px;
}

.bloc {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0px 0px 14px;
    box-shadow: 0px 2px 5px 1px #BFBFBF;
    border-radius: 3px 0px 0px;
    background-color: #FFF;
}

有什么可能的解决方案吗？

谢谢,

文森

Answer 1

我建议您使用flexbox，但不幸的是IE9不支持它

解决方案是为垂直列添加类，并按如下方式设置样式：

* {
  box-sizing: border-box;
}
.bloc {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    box-shadow: 0px 2px 5px 1px #BFBFBF;
    border-radius: 3px 0px 0px;
    background-color: #FFF;
}

.cols {
  width: 80%;
  display: flex;
  margin: auto;
}
.col {
  display: flex;
  &.col-1-3 {
    flex: 1 1 33%;
    margin-right: 15px;
  }
  &.col-2-3 {
    flex: 1 1 66%;

  }
  &.col-vertical {
    display: flex;
    flex-direction: column;
    .bloc {
      display: flex;
      flex: 1 1 auto;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

下面是codepen：http://codepen.io/insanepl/pen/doEKLz?editors=110