将两个内联块 div 与内容对齐答案

【问题标题】：Align two inline-block div with content将两个内联块 div 与内容对齐
【发布时间】：2015-03-16 02:23:03
【问题描述】：

我有两个 inline-block div，每个 div 的宽度都是其父级的 50%，并且它们正确地彼此相邻显示。但是，当我添加指向其中一个 div 的链接时，第二个 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/

如何对齐两个div？

【问题讨论】：

我觉得很好，你能解释一下你看到了什么吗（也许截图会有所帮助）

标签： html css

【解决方案1】：

使用display: inline-block时，元素默认设置为baseline，改为设置vertical-align: top

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

FIDDLE

【讨论】：

@Carlo 是的，这是一个vertical-align 问题，我会在我的帖子中更新语言

【解决方案2】：

您也可以将它们都向左浮动，它们将在包装器中彼此相邻。

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

【讨论】：