html – 使用内嵌块不正确对齐的Div框

我有一些非常简单的代码,对于我正在试图实现的外观是完美的.我有两个div被显示为包含在外部div中的“Box”,它是BoxContainer.我把盒子坐在彼此的旁边,而不是在另一个的顶部,它们在屏幕中间完美对齐.随着浏览器宽度越来越小,盒子宽度缩小/增长,如果浏览器窗口太小,而这些框仍然位于页面的中心位置,则框会重新定位到另一个顶部.完善.

唯一的问题是盒子在底部而不是顶部对齐.因为第二个盒子里面的文字较少,所以它被进一步向下推到页面上以与第一个框的底部对齐.我希望他们在顶部对齐.

我相信这是由显示：inline-block引起的,但我不知道为什么,我不知道如何解决它,并保持上面列出的相同功能.

如果你能帮助我,我一定会感激你的！

<!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

谢谢！

解决方法

由于这些框已经是内嵌块,因此您可以添加vertical-align：top到.Box样式.

html – 使用内嵌块不正确对齐的Div框

解决方法

相关推荐