我有 2 个 div,一个宽度为 50%,另一个宽度为 25%。
它们应该水平居中位于一条线上。
我可以让这个工作正常。但是当我插入一个段落时,它们就会中断。
知道为什么吗?
html:
<section>
<div class="twothird"> </div>
<div class="onethird"><p>test</p></div>
</section>
CSS:
.onethird {
width: 25%;
background: white;
min-height: 20em;
display: inline-block;
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
.twothird {
width: 50%;
background: white;
min-height: 20em;
display: inline-block;
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
最佳答案
内联 block 元素对齐,默认为基线
如果应用于两个内联 block div,这应该可以修复它
CSS
display: inline-block;
vertical-align: top;
您可能需要加宽显示窗 Eloquent 能进行检查。
关于html - 插入子 <p> 后 Div 未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24386182/