所有div的最大div的高度，s

Question

我在父div中有几个div（如此图像）。我想自动获取最大div的高度到所有div。有CSS的解决方案吗？

Answer 1

这是一个经典的CSS高度问题， flexbox 很好地解决了这个问题。

.parent {
  display: flex;
  border: 2px solid #222;
  flex-direction: row;
  padding: 10px;
}

.parent .child {
  padding-right: 10px;
  flex-grow: 1;
  width: 33%;
}

.parent .child:last-child {
  padding-right: 0;
}

.parent .child .content {
  border: 1px solid blue;
  height: 100%;
}

.parent .child:first-child .content {
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    <div class="content">
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah
    </div>
  </div>
  <div class="child">
    <div class="content">Div 2</div>
  </div>
  <div class="child">
    <div class="content">Div 3</div>
  </div>
</div>

Answer 2

你的回答是flexbox。这将为您提供3列水平对齐，高度与容器（以及其他子项）的最大高度相同。

<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>

.flex-container { display: -webkit-flex; 
display: flex; 
-webkit-flex-flow: row wrap; 
flex-flow: row wrap;
height:500px;} 

.flex-item { 
height:100%
display:block }

Fiddle

Answer 3

您可以使用flexbox实现此目的 - 包含更少的代码（根据您的利益调整值）：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  overflow: auto;
}

.parentDiv {
  display: flex;
  flex-flow: row wrap;
  border: 2px solid black;
  padding: 10px;
}

.parentDiv div {
  width: 33.3%;
  flex: 1;
  margin-left: 10px;
  border: 1px solid blue;
}

.parentDiv div:first-child {
  margin-left: 0;
  border: 1px solid red;
}

＆＃13;

<div class="parentDiv">
  <div>Div 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex provident a eaque sequi. Sapiente, esse, animi! Debitis eius, officiis minus totam delectus iusto, tenetur corrupti quo officia quis minima tempore. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Quibusdam consequuntur quaerat hic optio sint perspiciatis cumque doloribus blanditiis explicabo animi non eveniet aperiam, harum dolor, earum rem temporibus eos. Optio.</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;