浮动元素后忽略元素边距
我有一个带有顶部和底部边距的“已清除”
CSS：
hr {
width: 100%;
height: 1px;
border: 1px;
background-color: #d3d7cf;
color: #d3d7cf;
clear: both;
margin: 16px auto;
}
.column {
text-align: center;
float: left;
margin-right: 16px;
width: 200px
}
HTML：
<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>
我发现我可以使用 overflow:hidden 将列包装在 div 中，但是有没有一种解决方案可以让我不需要向 HTML 添加额外的标记？
I have a "cleared" <hr> tag with margins top and bottom. However, after two floated elements as columns, the top margin is ignored and the line sits right below the text.
CSS:
hr {
width: 100%;
height: 1px;
border: 1px;
background-color: #d3d7cf;
color: #d3d7cf;
clear: both;
margin: 16px auto;
}
.column {
text-align: center;
float: left;
margin-right: 16px;
width: 200px
}
HTML:
<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>
I found out that I can wrap the columns in a div with overflow: hidden, but is there a solution where I don't need to add extra markup to the HTML?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将 margin-bottom: 16px 添加到“column”类中。
或者向列添加填充（如果您在列类上使用边框，则显然不是）。
Add margin-bottom: 16px to the "column" class.
Or add padding to the columns (obviously not if you're using borders on the column class).
将
float:left添加到HR样式。现在，这应该使
HR以与浮动DIV相同的流程播放，并应用您在 CSS 第一个版本中缺少的上边距。Add
float:leftto theHRstyle.This should now make the
HRplay in the same flow as the floatedDIVs and apply the top margin that you were missing in the first version of your CSS.