html - 根据其邻居增加 div 高度

Question

我想让一个 div 根据其邻居的高度增加它的高度。问题是我必须能够给他们一个最小高度。 (130 像素)。我认为这是一个非常基本的问题，但我不明白，希望有人能帮助我。

问题:

• div.guide-image 和 div.guide-descr 应该始终相同 高度
• div.guide(或其子项)的最小高度应为 130 像素。

以下情况: jsFiddle

HTML

<div class="guide">
    <div class="guide-image"><img src="http://lorempixel.com/64/36" /></div>
    <div class="guide-descr">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}

div.guide
{
    width: 800px;
}

div.guide-image
{
    float: left;
    width: 250px;

    background-color: #B0BAC9;
}

div.guide-image img
{
    display: block;
    margin: 40px auto;

    max-width: 90%;
    max-height: 80%;
}

div.guide-descr
{
    float: left;
    width: 550px;

    padding: 25px 25px 25px 25px;
    box-sizing: border-box;

    background-color: #116FD1;
}

Answer 1

使用 display 属性代替 float 可以实现您的目标。试试这个:

div.guide
{
    display:table;
    width: 800px;
}

div.guide-image
{
    display:table-cell;
    vertical-align:middle;
}
div.guide-descr
{
    display:table-cell;
    vertical-align:middle;
}

检查 DemoFiddle

Antoher 方法可以使用 flexbox 方法，但请检查您是否可以支持 Here

div.guide
{
    display:flex;
    width: 800px;
}

Flex 演示 DemoFiddle