CSS div layout fix

Question

Ich habe ein Problem mit dem Layout meiner divs, ich übe meine CSS-Fähigkeiten, ein Layout zu machen, aber ich stoße auf ein konsistentes Problem. Da ich es schwer finde zu erklären, werde ich ein Bild mit dem Code bereitstellen.

-Code

<div class="section-small pattern-triangles drop-shadow"> 
    <div class="container"> 
     <div class="col-lg-3 grey-text"> 
      <div class="footer-title"> 
       <h3>Contact Us</h3> 
      </div> 
      <div class="footer-body"> 
       <ul class="footer-li"> 
        <li>England, Leicester</li> 
        <li>ikdevelopment@hotmail.com</li> 
        <li>07940033706</li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-lg-3 grey-text red-border"> 
      <div class="footer-title red-border" style="position: static"> 
       <h3>More</h3> 
      </div> 
      <div class="footer-body red-border"> 
       <ul class="footer-li"> 
        <li>Blog</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Der Code besteht aus zwei "Col-lg-3" Klassen (dies ist nicht btw Bootstrap-ive verwendet nur ihre Namenskonventionen), das Problem, das ich habe, ist, dass, wenn die Liste innerhalb der Spalte hat nicht die gleiche Anzahl von Elementen gibt es ein Problem mit Höhe wie unten.

Ich bin sicher, andere haben kommen accros dieses Problem unter all den verbundenen CSS-Code ist.

.footer-li { 
    list-style-type: none; 
    padding: 0; 
    margin-left: 0; 
    margin-bottom: 5px; 
} 

.footer-li li{ 
    margin-bottom: 10px; 
} 

.col-lg-3{ 
    color: black; 
    width: 33%; 
    padding: 10px; 
    display: inline-block; 
} 

Answer 1

Sie müssen beide Containerelemente links schweben lassen. Sie könnten den folgenden Code hinzufügen, um Ihr Problem zu lösen:

.grey-text{ float:left; } 

Answer 2

Verwendung float:left statt display:inline-block:

.col-lg-3{ 
    color: black; 
    width: 33%; 
    padding: 10px; 
    float:left; 
}