javascript - HTML 和 CSS : same height two div in div

Question

首先，请原谅我的英语不好。但我在 CSS 方面遇到了问题。

我想使 Div 列中的色 block 高度相同。

绿色 block 与蓝色 block 的高度不同。我希望它们处于相同的高度。

区 block :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;
      }
    }
  }
}

这是代码笔: http://codepen.io/insanepl/pen/doEKLz?editors=110