浮動左間距

Question

我收集了我正在顯示的點的集合，我將它們全部左移，但如果上面的文本太多，則會強制出現空格。無法弄清楚是什麼造成這種情況，有沒有人有任何想法？

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

好吧，既然你已經熟悉的clearfix概念，你正在使用它錯了。改變你的代碼這種方式，包括.clearfix內float 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>標籤。它有效，但它在語義上不正確。 A <div>只能用於部門或部門。

Answer 2

給min-height每個對號包即你的情況.checkmark-33

例 -

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