根据具有最多内容的div设置三个div的相同高度

Question

我有这段代码：

<style>
.homediv    {
    float:left;
    margin-bottom:10px;
    border-style:solid;
    border-width:1px;
    border-collapse:collapse;
    background-color:white;
    padding:5px;
    overflow:auto;
    display:inline-block;
    width:32%;
    box-sizing:inherit;
    color:black;
    text-decoration:none;
}
#home   {
    box-sizing:border-box;
}
.middle {
    margin-left:2%;
    margin-right:2%;
}
</style>

<div id="home">

<a class="homediv" href="">
<span class="hometitle">Title</span>
<p class="homedescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</a>

<a class="homediv middle" href="">
<span class="hometitle">Title</span>
<p class="homedescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>

<a class="homediv" href="">
<span class="hometitle">Title</span>
<p class="homedescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>

</div>

并排三列，高度相同但内容不同。这意味着，每个div都有不同的高度。我希望所有div都具有与内容最多的div相同的高度。

在这种情况下意味着：中间div和右边div应该将高度扩展到左边div的高度。

我该怎么做？

Answer 1

的 Flexbox的

在您的父display: flex;中使用div。

display: flex;所做的是所有children/contents具有相同的高度。

#home{
   box-sizing:border-box;
   display:flex; /* all children of equal height */
}

.homediv    {
    float:left;
    margin-bottom:10px;
    border-style:solid;
    border-width:1px;
    border-collapse:collapse;
    background-color:white;
    padding:5px;
    overflow:auto;
    display:inline-block;
    width:32%;
    box-sizing:inherit;
    color:black;
    text-decoration:none;
}
#home   {
    box-sizing:border-box;
    display : flex;
}
.middle {
    margin-left:2%;
    margin-right:2%;
}

<div id="home">

<a class="homediv" href="">
<span class="hometitle">Title</span>
<p class="homedescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</a>

<a class="homediv middle" href="">
<span class="hometitle">Title</span>
<p class="homedescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>

<a class="homediv" href="">
<span class="hometitle">Title</span>
<p class="homedescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>

</div>

Answer 2

检查一下。

<style>
 .homediv{ height:inherit; }
</style>

<div class="homediv">
<a href="#"></a>
</div>
<div class="homediv">
<a href="#"></a>
</div>
<div class="homediv">
<a href="#"></a>
</div>

div的高度相同。