版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/deng1456694385/article/details/87985160
父元素内多个子元素,子元素根据内容确定高度,子元素和最高的子元素等高
父元素中有多个子元素,父元素高度不确定,子元素高度不确定以内容的高度确定,但是这时候要求子元素等高,也就是按照子元素中内容最多的那个元素的高度确定所有元素的高度,这种需求以普通的布局是很难实现的.
<body>
<div class="father">
<div class="child"><span>hello</span><br><span>hello</span><br><span>hello</span><br></div>
<div class="child"><span>hello</span><br><span>hello</span><br></div>
<div class="child"><span>hello</span><br></div>
<div class="child"></div>
</div>
</body>
<style>
.father {
display: inline-block;
background-color: deepskyblue;
}
.child {
vertical-align: top;
display: inline-block;
margin-left: 10px;
background-color: red;
}
</style>
这种情况下要实现三者登高,很麻烦,因为无法使用height:100%,因为父元素高度.但是用flex布局就很高解决,设置子元素align-items:stretch,也就是拉升子元素到父元素高度
<body>
<div class="father">
<div class="child"><span>hello</span><br><span>hello</span><br><span>hello</span><br><span>hello</span><br></div>
<div class="child"><span>hello</span><br><span>hello</span><br></div>
<div class="child"><span>hello</span><br></div>
<div class="child"></div>
</div>
</body>
<style>
.father {
display: flex;
background-color: deepskyblue;
}
.child {
display: inline-block;
align-items: stretch;
vertical-align: top;
margin-left: 10px;
background-color: red;
}
</style>
