Float Left Spacing

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, вы используете это неправильно. Измените код таким образом, чтобы включить float ред элементы внутри .clearfix:

<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> теги. Он работает, но он не является семантически правильным. A <div> следует использовать только для разделения или раздела.

Answer 2

Дайте min-height каждому галочка оберточной т.е. в вашем случае .checkmark-33

ПРИМЕР-

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