我想让div根据邻居的高度增加它的高度。问题是我必须能够给他们一个最小高度。 (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;
}
答案 0 :(得分:2)
使用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