无法获得垂直对齐：top可以对内联块，固定高度的元素正常工作。

Question

I have an issue where I have been trying to get several elements in a container to be vertically aligned to the top of this container. The elements SHOULD NOT have any space between those at the top, and those below them. This should be collapsed.

Here is the 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> 

And here is the CSS:

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

What it looks like on the demo site:

Link to image

Answer 1

 .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> 

Answer 2

Remove the heights and add the below 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

.category_links { column-gap: 0.5em; column-width: 11em; float: left; }

.footer_menu { display: inline-block; font-weight: bold; margin: 2px; padding: 0; width: 98%; }