html - 子 插入后 Div 未对齐

Question

我有 2 个 div，一个 50% 宽度，另一个 25%。

假设它们都水平居中位于一条线上。

我可以让它正常工作。但是当我插入一个段落时，它们会中断。

知道为什么吗？

http://jsfiddle.net/3KuJa/

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;
}

Answer 1

内联 block 元素对齐，默认为baseline

如果应用于两个内联 block div，这应该会修复它

CSS

display: inline-block;
vertical-align: top;

已调整 JSfiddle Demo

您可能需要加宽显示窗 Eloquent 能进行检查。