我有一个容器和里面的图像。当父级被赋予 float
时,子级的高度不匹配。当两者都被赋予 float
时,它匹配。为什么?
<div class="parent"><img src="images/trest.png" class="image"></img></div>
在以下情况下不匹配:
.parent{
float:left;
}
.image{}
完美的时候:
.parent{
float:left;
}
.image{
float:left;
}
最佳答案
基本上,使用float
指定元素将in most cases将它变成一个 block
元素。
默认情况下,当放置在 block 级容器中时,图像元素会出现下面不需要的空白区域的问题。解决方案通常是将图像元素的显示设置为 block
。
来自 MDN :
As float implies the use of the block layout, it modifies the computed value of the display values in some cases:
float
与display:block
的比较(本质上结果是一样的):
.parent {
float: left;
border: 2px solid red;
}
.image {
border: 2px solid blue;
}
.image2 {
border: 2px solid blue;
display: block;
}
.image3 {
border: 2px solid blue;
float: left;
}
<div class="parent"><img src="https://placehold.it/100x100" class="image"/></div>
<div class="parent"><img src="https://placehold.it/100x100" class="image2"/></div>
<div class="parent"><img src="https://placehold.it/100x100" class="image3"/></div>
关于html - 为什么 float 在父容器中会改变 img 的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37324206/