高度最大的div来所有的div，S

Question

我有几个DIV（S）（这样的形象）内部在父DIV。我想自动获得，最大的股利高度的所有股利（S）。有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的实现这一点 - 包含更少的代码（调整值对您的好处）：

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; 
 
}

<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>