Html 使用内联块将垂直对齐应用于两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12174646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying vertical-align to two divs using inline-block
提问by Dalton Gore
So I have some DIVs. The structure is this
所以我有一些 DIV。结构是这个
<div id="content">
<div id="lcol">some content</div>
<div id="lcol">some<br />content</div>
</div>
And my problem is that the two divs are of different height. I'm using display:inline-blockfor 'lcol' while 'content' is just a regular div. The two lcol divs do indeed show up side by side, but they are anchored at the bottom of the div. I would like them to be aligned to the top of the div. I tried adding vertical-align:topto 'content' but nothing happened.
我的问题是两个 div 的高度不同。我使用的display:inline-block是 'lcol' 而 'content' 只是一个普通的 div。两个 lcol div 确实并排显示，但它们锚定在 div 的底部。我希望它们与 div 的顶部对齐。我尝试添加vertical-align:top到“内容”，但什么也没发生。
Any ideas?
有任何想法吗？
JsFiddle: http://jsfiddle.net/qxe8h/1/
JsFiddle：http: //jsfiddle.net/qxe8h/1/
回答by sandeep
Give vertical-align:topto your inline-blockelements. Write like this:
将vertical-align:top赋予内联块元素。像这样写：
#lcol {vertical-align:top;}
Check this http://jsfiddle.net/qxe8h/2/
