Html 插入child

后Div错位 我有两个div，一个50%宽，另一个25%

假设他们都坐在同一条线上，水平居中

我可以很好地工作。但当我插入一段时，它们就断了

知道为什么吗

html:

由于您有box shadow，我建议使用IE8+支持的解决方案：

将显示：表格/表格单元格用于节和div

请记住：您的提琴没有将宽度和高度设置为html，body…始终声明，它避免了以后在DOM中出现的许多混乱问题-经验法则：

由于您有box shadow，我建议使用IE8+支持的解决方案：

将显示：表格/表格单元格用于节和div

请记住：您的提琴没有将宽度和高度设置为html，body…始终声明，它避免了以后在DOM中出现的许多混乱问题-经验法则：

---

默认情况下，内联块元素与基线对齐

如果应用于两个内联块div，则应修复此问题

CSS

调整

---

您可能必须加宽显示窗口以进行检查。

内联块元素默认对齐到基线

如果应用于两个内联块div，则应修复此问题

CSS

调整

---

您可能必须加宽显示窗口以进行检查。

问题的根源确实是p和其左侧的空内联框之间基线对齐的交互作用

除了使用vertical align:top解决此问题外，还可以使用overflow:auto applicated to.onethird和.twothird，这会触发新的块格式上下文，从而防止两个内联块容器中的文本行相互交互

---

请参见演示：

问题的根源确实是p和它左边的空内联框之间的基线对齐的交互作用

除了使用vertical align:top解决此问题外，还可以使用overflow:auto applicated to.onethird和.twothird，这会触发新的块格式上下文，从而防止两个内联块容器中的文本行相互交互

---

请参见演示：

he funcy:-我会使用float或display:inline block两个div应该垂直或水平处于同一行？@chrisツ : OP已经在使用它了！！：@NoobEditor OOOPs，sryInline块项默认为对齐基线尝试垂直对齐：top哦..别忘了考虑空格。他很有趣：-我会使用浮点或显示：inline块两个div应该垂直或水平在同一行？@chrisツ : OP已经在使用它了！！：@NoobEditor OOOPs，sryInline块项默认为对齐基线尝试垂直对齐：top Oh..并且不要忘记考虑空白。

<section>
    <div class="twothird"> </div>
    <div class="onethird"><p>test</p></div>
</section>

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

section {
    display:table; /* make parent table type */
    width:60%; /* give width */
    margin :0 auto; /* center your section */
    border:1px solid green /* just for display */
}


.onethird {
    width: 25%;
    background: white;
    min-height: 20em;
    display:table-cell;
    /* display: inline-block; changed this value */
    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;
    border:1px solid red;
}
.twothird {
    width: 50%;
    border:1px solid red;
    background: white;
    min-height: 20em;
    display:table-cell;
    /* display: inline-block;  changed this value */
    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;
}

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