浮动左间距

Question

我有一组要显示的点，我将它们全部向左浮动，但是如果上面的文本太多，它会强制显示 space .无法弄清楚是什么原因造成的，有没有人有任何想法？

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;
}

获取问题

Answer 1

给每个复选标记换行 min-height 即在你的情况下 .checkmark-33

示例-

.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}

Answer 2

好吧，既然你已经熟悉了clearfix这个概念，那你就用错了。以这种方式更改您的代码，以在 .clearfix:

中包含 floated 元素

<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 是一种 hacky 方式。正确使用 clearfix 嵌套浮动项。

另外，请注意，使用 <i> 标签显示图标而不是 <div> 标签。它有效，但在语义上不正确。 <div> 只能用于分部或部分。

浮动左间距

Float Left Spacing

html

css

css-float