Question

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

问题：

div.guide-image和div.guide-descr应始终保持一致高度
div.guide（或其子女）的最小身高应为130px。

以下情况： 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

根据邻居增长div高度

1 个答案: