无法获得垂直对齐：顶部可以正确使用内嵌块，固定高度元素。

时间：2017-03-09 12:38:03

标签： jquery html css flexbox

我有一个问题，我一直试图让容器中的几个元素垂直对齐到这个容器的顶部。元素在顶部和下面的元素之间不应该有任何空间。这应该是崩溃的。

这是HTML：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这是CSS：

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

演示网站上的内容：

Link to image

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

删除高度并添加以下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 {       柱间隙：0.5em;       列宽：11em;       向左飘浮;    }

     

.footer_menu {       display：inline-block;       font-weight：bold;       保证金：2px;       填充：0;       宽度：98％; }

相关问题
最新问题