浮动左边的幻影上边距

Question

我在浮动元素方面遇到了一些麻烦。我有一些幻影margin出现在我的第3个col元素上;如下图所示;

我尝试过添加; box-sizing: border-box;，但这也无济于事。有什么我想念的吗？

代码

＆＃13;

＆＃13;

#f-wrap {
  position: relative;
  width:100%;
  margin: 0 auto;
}
.row {
  display: inline-block;
  width: 100%;
}
.col {
  display: inline-block;
  float: left;
  width: 45%;
  margin: 2em 1em;
  background: #f0f;
}

＆＃13;

<section class="ctre s-f">
  <div id="t-wrap">
    <div class="row">
      <div class="col">
        <img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
      </div>
      <div class="col">
        <h3 class="f-h">Related Links</h3><br/>
        <ul>
          <li class="f-lnk"><a href="">Home</a></li>
          <li class="f-lnk"><a href="">About us</a></li>
          <li class="f-lnk"><a href="">Products</a></li>
          <li class="f-lnk"><a href="">News</a></li>
          <li class="f-lnk"><a href="">Contact us</a></li>
          <li class="f-lnk"><a href="">Recycle</a></li>
          <li class="f-lnk"><a href="">Site map</a></li>
        </ul>
      </div>
    </div>
    <hr class="style-two"/>
    <div class="row">
      <div class="col">
        <h3 class="f-h">Social</h3><br/>
        <ul>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
        </ul>
      </div>
      <div class="col f-txt">
        <h3 class="f-h">Find Us</h3><br/>
        MGI Technology<br/>
        <br/>
        <a href="#" class="f-btn">MAP</a>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

我非常感谢能获得的任何帮助......

更新：现在尝试vertical-align:top;并删除了float:left。问题仍然存在。

临时实时Example

Answer 1

您的代码段没有显示任何问题，但无论如何，但默认情况下inline-block似乎是vertical-align:baseline，因此您必须设置为vertical-align:top

加上删除不必要的float:left

＆＃13;

＆＃13;

#f-wrap {
  position: relative;
  width:100%;
  margin: 0 auto;
}
.row {
  display: inline-block;
  vertical-align:top;
  width: 100%;
}
.col {
  display: inline-block;
  vertical-align:top;
  width: 45%;
  margin: 2em 1em;
  background: #f0f;
}

＆＃13;

<section class="ctre s-f">
  <div id="t-wrap">
    <div class="row">
      <div class="col">
        <img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
      </div>
      <div class="col">
        <h3 class="f-h">Related Links</h3><br/>
        <ul>
          <li class="f-lnk"><a href="">Home</a></li>
          <li class="f-lnk"><a href="">About us</a></li>
          <li class="f-lnk"><a href="">Products</a></li>
          <li class="f-lnk"><a href="">News</a></li>
          <li class="f-lnk"><a href="">Contact us</a></li>
          <li class="f-lnk"><a href="">Recycle</a></li>
          <li class="f-lnk"><a href="">Site map</a></li>
        </ul>
      </div>
    </div>
    <hr class="style-two"/>
    <div class="row">
      <div class="col">
        <h3 class="f-h">Social</h3><br/>
        <ul>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
        </ul>
      </div>
      <div class="col f-txt">
        <h3 class="f-h">Find Us</h3><br/>
        MGI Technology<br/>
        <br/>
        <a href="#" class="f-btn">MAP</a>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

更新：

查看您的实际网站时，问题是其他col有另一个类f-txt，其中有一个属性font-size:8pt，并且可以更改列的高度。

因此，您要么将同一个类应用于第一个.col，要么删除该属性