为什么浮动在父容器中会更改img的大小？
Karthikeyan sundaramoorthi
我有一个容器和一个图像在里面。当给定父母时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意志在大多数情况下，使之成为一个block元素。
当放置在块级容器中时，默认情况下，图像元素在下面会出现不需要的空白的问题。解决方案通常是将图像元素的显示设置为block。
从MDN：
由于float表示使用块布局，因此在某些情况下会修改显示值的计算值：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
为什么父容器的填充不应用于浮动的无序列表？
- 2
它的地址在执行过程中会更改。为什么？
- 3
如何调整浮动元素的大小，以使其总宽度始终为父容器的100％？
- 4
如何调整浮动元素的大小，以使其总宽度始终为父容器的100％？
- 5
当浮动元素的容器没有高度时，为什么浮动元素没有与文档流分离？
- 6
为什么容器的大小和图像的大小相等？
- 7
为什么将逗号选择器放在空间选择器中会破坏父级？
- 8
为什么父容器内的内容会影响父容器的位置？
- 9
为什么将 <img> 放在容器中（例如 <div> ）？
- 10
为什么将元素推入concat（）返回的新数组中会返回数组的大小，而不是数组本身？
- 11
为什么溢出会覆盖父容器的宽度？
- 12
为什么OneDrive更改文件的大小？
- 13
为什么浮动父级中的空span标签会在新行上呈现？
- 14
为什么此浮动父级在考虑同级之前计算其宽度？
- 15
当仅包含浮动项目时，为什么内联块容器不会折叠？
- 16
为什么在R中更改stringsAsFactors会更改文件大小？
- 17
为什么更改数组大小后结果会更改？
- 18
为什么在春天Saml中会忽略cacerts？
- 19
为什么在此Xaml中会忽略StringFormat？
- 20
为什么Fortran在Vim中会自动换行
- 21
为什么在春天Saml中会忽略cacerts？
- 22
宽度：img上的calc（）与父容器无关
- 23
为什么添加图像会更改父<div>或<span>的位置？
- 24
为什么更改父类为空输入？
- 25
为什么添加图像会更改父<div>或<span>的位置？
- 26
为什么boxShadow可以更改容器的背景颜色？
- 27
SWT为什么在父级中创建新的Composite时要调整父级Composite的大小？
- 28
缩放几个浮动图像以适合父容器的宽度
- 29
通过拖放自动调整父容器的大小
我来说两句