無法獲得垂直對齊：頂部可正確工作以進行內嵌塊固定高度元素。

Question

我有一個問題，我一直在試圖讓容器中的幾個元素垂直對齊到這個容器的頂部。元素之間不應該有空格，也不應該在空格之間有空格。這應該是崩潰。

下面是HTML：

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 category_links"> 
 
     <div class="footer_menu" style="height: 83px;"> 
 
     <h3 class="secondary">Brands And Categories</h3> 
 
     <ul> 
 
      <li><a href="men">Men</a></li> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    </div> 
 
    </div> 
 
</div>

這裏是CSS：

.footer_menu { 
    width: 24%; 
    font-weight: bold; 
    margin-bottom: 15px; 
    vertical-align: top; 
    display: inline-block; 
} 

什麼它看起來像演示網站：

Link to image

Answer 1

取出高度，並添加以下CSS

HTML

<div class="row"> 
<div class="col-md-8 category_links"> 
    <div class="footer_menu"> 
    <h3 class="secondary">Brands And Categories</h3> 
    <ul> 
     <li><a href="men">Men</a></li> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
    <div class="footer_menu" > 
    <h3 class="secondary">Help And Policy</h3> 
    <ul> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
    <div class="footer_menu" > 
    <h3 class="secondary">Help And Policy</h3> 
    <ul> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
    <div class="footer_menu" > 
    <h3 class="secondary">Help And Policy</h3> 
    <ul> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
    <div class="footer_menu" > 
    <h3 class="secondary">Help And Policy</h3> 
    <ul> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
    <div class="footer_menu" > 
    <h3 class="secondary">Help And Policy</h3> 
    <ul> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
    <div class="footer_menu" > 
    <h3 class="secondary">Help And Policy</h3> 
    <ul> 
     <li><a href="cookie-policy">Cookie Policy</a></li> 
     <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
    </ul> 
    </div> 
</div> 

CSS

。分類鏈接{ column-gap：0.5em; column-width：11em; float：left; }

.footer_menu {display：inline-block; font-weight：bold; margin：2px; 填充：0; 寬度：98％; }

Answer 2

.footer_menu { 
 
    width: 24%; 
 
    font-weight: bold; 
 
    margin-bottom: 15px; 
 
    vertical-align: top; 
 
    display: inline-table; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 category_links"> 
 
     <div class="footer_menu" style="height: 83px;"> 
 
     <h3 class="secondary">Brands And Categories</h3> 
 
     <ul> 
 
      <li><a href="men">Men</a></li> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="footer_menu" style="height: 64px;"> 
 
     <h3 class="secondary">Help And Policy</h3> 
 
     <ul> 
 
      <li><a href="cookie-policy">Cookie Policy</a></li> 
 
      <li><a href="terms-and-conditions">Terms and Conditions</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    </div> 
 
    </div> 
 
</div>