DIV盒没有正确对齐使用inline-block的 [英] Div boxes not aligning properly using inline-block
问题描述
我有一些非常简单的code这是什么看我想要达到完美的作品。我有显示为它包含一个外层div这是boxContainer内的盒子两个div。我有拖曳邻座彼此，而不是一个在另一个的顶部上，并且它们在屏幕中间完全对齐。箱子宽度收缩/成长为浏览器的宽度变小/大，并且拖曳移居到放在另一个的上面一个，如果在浏览器窗口得到太小，而其余的在页面上居中。完美。
I have some very simple code which works perfect for what look I'm trying to achieve. I have two divs which are displayed as "boxes" which are contained within an outer div which is the boxContainer. I have the boxes sitting next to each other rather than one on top of the other, and they are aligned perfectly in the middle of the screen. The boxes widths shrink/grow as the browser width gets smaller/larger, and the boxes relocate to be one on top of the other if the browser window gets too small, while remaining centered on the page. Perfect.
唯一的问题是，该盒的底部，而不是顶部对齐。因为第二箱在其内有较少的文字，它进一步向下推该页面，以便与所述第一盒的底部。我希望他们能够在顶部对齐，而不是。
The only problem is that the boxes are aligned on the bottom instead of the top. Because the second box has less text within it, it is pushed further down the page to align with the bottom of the first box. I want them to align on the top instead.
我相信这是由于显示：inline-block的，但我不知道为什么，我不知道如何解决它，让我上面列出的相同功能
I believe this is caused by display:inline-block, but I'm not sure why, and I don't know how to fix it and keep the same features I listed above.
如果你能帮助我，我一定AP preciate它！
If you could help me out, I'd surely appreciate it!!
<!DOCTYPE html >
<html>
<head>
<style>
#boxContainer {
width:80%;
margin:0 auto;
text-align:center;
}
.box {
display:inline-block;
width:40%;
margin:20px;
border:solid 5px;
border-radius:40px;
}
</style>
</head>
<body>
<div id="boxContainer">
<div class="box">
<h3>BOX 1</h3>
<p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
</div>
<div class="box">
<h3>BOX 2</h3>
<p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
</div>
</div>
</body>
</html>
链接到图像显示框，以及底部如何适应： http://cl.ly/image/0j3T033b1f16
感谢您！
推荐答案
由于箱子都已经 inline-block的您可以添加垂直对齐：顶部到 .box的风格
Since the boxes are already inline-block you can add vertical-align: top to the .box style.
这篇关于DIV盒没有正确对齐使用inline-block的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
