在HTML5上使用向左浮动时，div底部的边距
夜店
我不明白为什么以下代码会在黄色div下方创建边距？以下代码是HTML5（请参阅doctype）。如果您删除了doctype，因此它不是HTML5，那么就没有空白（我喜欢）。关键是该代码必须在HTML5中（这是我的要求）。同样，黄色的div必须具有width：300px（这是我的要求）。
在这种情况下，如何摆脱黄色div下方的边距？
<!DOCTYPE html>
<html>
<body>
<div style="background-color:#00f;">
<div style="display:inline-block;width:300px;background-color:#ff0;">
<div style="float:left;">Hello</div>
<div style="float:right;">World</div>
</div>
</div>
</body>
</html>
您可以在以下网址查看上面的代码：https : //jsfiddle.net/gscz9ahq/
您在这里有预览：
我尝试使用“ clear：both;”；没有成功。
关于如何解决这个问题的任何想法？您可以修改jsfiddle代码以使其正常工作吗？
他们离开了
正是display: inline-block;创造空间的原因。但是您的html有点过时，使用float时需要清除div。
<div style="background-color:#00f;">
<div class="clearfix" style="width:300px;background-color:#ff0;">
<div style="float:left;">Hello</div>
<div style="float:right;">World</div>
</div>
</div>
.clearfix:after {
content: "";
display: table;
clear: both;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在HTML5上使用向左浮动时，div底部的边距
- 2
HTML5 canvas fillText边距
- 3
外部div（未浮动时）丢弃内部<p>边距
- 4
使用mpdf在表格中的div上添加边距顶部和底部
- 5
向左浮动时，填充不同DIV“高度”上的间隙
- 6
如果小于最小宽度，则向左浮动或自动增加边距
- 7
如果小于最小宽度，则向左浮动或自动增加边距
- 8
HTML5“固定”浮动DIV？
- 9
Div 底部的边框，无填充或边距
- 10
父 div 上具有负边距的 CSS 浮动列正在堆叠
- 11
在移动设备上查看时 HTML 边距压扁
- 12
在 css 中使用浮动时出现意外的 10px 边距
- 13
如何在div中没有浮动的外部边距
- 14
涉及浮动左元素时如何修复边距自动
- 15
Div不会向左浮动
- 16
无法识别HTML5 / CSS3边距命令
- 17
div负边距-底部不起作用
- 18
外部 DIV 的边距底部不起作用
- 19
试图让第3个div“浮动”在2个div上，即“向左浮动”和“向右浮动”
- 20
检测元素底部边距上的鼠标悬停
- 21
底部上的徽章导航视图填充或边距
- 22
如何在sidenav materializecss上添加边距底部？
- 23
添加 FAB 时不显示颤动底部导航边距
- 24
CSS-div上的边距
- 25
在 <div1> 上应用边距
- 26
HTML / CSS：向左浮动
- 27
CSS定位，不使用浮动或边距调整
- 28
底部边距在html页面上不起作用
- 29
幻影顶部浮动边距
我来说两句