浮動小数点左寄せ

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編要素が含まれるように、この方法を変更します。

<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>は、部門またはセクションにのみ使用してください。

Answer 2

があなたのケース.checkmark-33

例 - にそれぞれチェックマークラップすなわちにmin-heightを与える取得

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