Float Left Spacing

Question

Ich habe eine Sammlung von Punkten, die ich zeige, ich schwebe sie alle links, aber wenn der Text zu viel in dem einen darüber ist, zwingt es dort zu einem Leerzeichen erscheinen. Kann nicht herausfinden, was das verursacht, hat jemand irgendwelche Ideen?

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

Problem bekommen

Answer 1

Okay, da Sie bereits vertraut mit dem Konzept clearfix sind, verwenden Sie es falsch. Ändern Sie Ihren Code auf diese Weise, umfassen die float ed Elemente innerhalb des .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> 

Hinzufügen height Hacky Weg. Verwenden Sie die clearfix ordnungsgemäß, um die schwebenden Elemente zu verschachteln.

Und auch eine Randnotiz, verwenden Sie <i> Tag zur Anzeige von Symbolen und nicht <div> Tags. Es funktioniert, aber es ist nicht semantisch korrekt. A <div> sollte nur für eine Abteilung oder einen Abschnitt verwendet werden.

Answer 2

Geben min-height zu jedem Häkchen wickeln d.h in Ihrem Fall .checkmark-33

Beispiel-

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