为什么div包含在sister-div中？

Question

我不明白为什么http://jsfiddle.net/zHH4D/ 上的小提琴不会在红色区域和右侧外显示"向右",但在红色区域内？

我可以把div放在父div之外和这种作品,但它对我来说没有意义.

我错在哪里？

Answer 1

你有一个错字:

<div style="width:340px;float:left;background-color:#f00;">
    <div>above ok</<div> <!-- TYPO -->
    <div>under ok</div>
</div>

这会导致浏览器尽可能地解释您的标记,从而产生此标记(从Chrome检查器复制):

<div style="width:340px;float:left;background-color:#f00;">
    <div>above ok<!--<div-->
    <div>under ok</div>
</div>
  <div style="float:left;">
    to the right?
  </div>
</div>

这是一个固定版本:

<div style="width:340px;float:left;background-color:#f00;">
    <div>above ok</div> <!-- Notice the closing div tag -->
    <div>under ok</div>
</div>