Question

首先，请原谅我的英语不好。但我的CSS有问题。

我想在Div栏中的颜色块中使用相同的高度。

块绿色与蓝色块的高度不同。我希望他们处于同一个高度。

<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

HTML＆amp; CSS：相同的高度div div

1 个答案: