我有一些非常简单的代码,它非常适合我想要实现的外观.我有两个显示为"盒子"的div,它们包含在一个外部div中,它是boxContainer.我把盒子放在彼此旁边,而不是一个放在另一个上面,它们在屏幕中间完美对齐.随着浏览器宽度变小/变大,框宽度缩小/增长,如果浏览器窗口变得太小,则框重新定位为一个在另一个上面,同时保持在页面上居中.完善.
唯一的问题是盒子在底部而不是顶部对齐.因为第二个框中的文本较少,所以它会在页面下方向下推,以与第一个框的底部对齐.我希望它们在顶部对齐.
我相信这是由display:inline-block引起的,但我不知道为什么,我不知道如何修复它并保留我上面列出的相同功能.
如果你可以帮助我,我一定会很感激!!
#boxContainer {
width:80%;
margin:0 auto;
text-align:center;
}
.box {
display:inline-block;
width:35%;
margin:20px;
border:solid 5px;
border-radius:40px;
}<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"> …