将两个inline-block div与内容对齐 [英] Align two inline-block div with content

问题描述

我有两个inline-block div，它们的父元素的宽度都是50％，并且彼此相邻。但是，当我添加一个链接到其中一个div，在第二个div

I have two inline-block divs, each 50% width of its parent, and they are correctly shown next to each other. But, when I add a link to one of those divs, there's a gap on top of the second div

<div class="wrap">
  <div class="resizable resizable1"> 
    <a href="#" class="link1">link1</a>
    <a href="#" class="link2">link2</a>
  </div><!-- 
  --><div class="resizable resizable2">second</div>
</div>

.wrap {
  width: 100%;
  font-size: 0;
}
.resizable {
  width: 50%;
  height: 120px;
  background-color: coral;
  display: inline-block;
}
.resizable2 {
  background-color: lightblue;
}
.resizable a {
  font-size: 12px;
}

Jsfiddle示例 http://jsfiddle.net/KyEr3/455/

Jsfiddle example http://jsfiddle.net/KyEr3/455/

如何对齐两个div？ p>

How can align the two divs?

推荐答案

当使用 display：inline-block code> baseline ，而不是设置 vertical-align：top

When using display: inline-block elements by default are set to baseline, instead set vertical-align: top

.resizable {
        width: 50%;
        height: 120px;
        background-color: coral;
        display: inline-block;
        vertical-align: top;
}

FIDDLE

这篇关于将两个inline-block div与内容对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！