使用内联块将垂直对齐应用于两个 div答案

【问题标题】：Applying vertical-align to two divs using inline-block使用内联块将垂直对齐应用于两个 div
【发布时间】：2012-08-23 20:51:42
【问题描述】：

所以我有一些 DIV。结构是这样的

    <div id="content">
        <div id="lcol">some content</div>
        <div id="lcol">some<br />content</div>
    </div>

我的问题是两个 div 的高度不同。我将display:inline-block 用于'lcol'，而'content' 只是一个普通的div。两个 lcol div 确实并排显示，但它们锚定在 div 的底部。我希望它们与 div 的顶部对齐。我尝试将vertical-align:top 添加到“内容”中，但没有任何反应。

有什么想法吗？

JsFiddle：http://jsfiddle.net/qxe8h/1/

【问题讨论】：

标签： html vertical-alignment css

【解决方案1】：

将 vertical-align:top 赋予您的 inline-block 元素。像这样写：

#lcol {vertical-align:top;}

查看http://jsfiddle.net/qxe8h/2/

【讨论】：

您应该只在 DOM 中使用一次 ID。如果您要拥有多个需要相同样式的元素，请改用类。