我有一个我正在显示的点集合,我将它们全部悬空,但是如果上面的文本太多则会强制出现一个空格。无法弄清楚造成这种情况的原因,有没有人有任何想法?
HTML:
<div class="all-the-screen checkmark-move">
<div class="contain-inner">
<div class="checkmark-outer">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
<div class="clearfix"></div>
<div class="read-more-show noselect">Show More</div>
</div>
</div>
</div>
CSS:
.checkmark-outer {
width:92%;
margin-left:4%;
margin-right:4%;
}
.checkmark-move {
margin-top:18px;
}
.checkmark-inner {
overflow: hidden;
font-family: 'Source Sans Pro Regular';
line-height:24px;
vertical-align: middle;
padding-left:4px;
padding-right:20px;
padding-top:4px;
}
.checkmark-33 {
width:33.33%;
float:left;
margin-bottom:6px;
}
.checkmark-icon {
float:left;
}
.icon-background {
color: #8d1e22;
}
.icon-text {
color: #ffffff;
}
答案 0 :(得分:3)
好的,既然你已经熟悉了clearfix
概念,那你就错了。以这种方式更改您的代码,以在float
:
.clearfix
ed元素
<div class="clearfix">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>
添加height
是一种愚蠢的方式。正确使用clearfix
嵌套浮动项目。
另外,请注意,使用<i>
标记来显示图标,而不是<div>
标记。它有效,但它在语义上不正确。 <div>
只能用于分部或部分。
答案 1 :(得分:0)
将min-height
提供给每个复选标记,即在您的案例中.checkmark-33
实施例 -
.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}