Div在文本插入时放错了位置，而文本则脱离了div

Question

以下是问题的jsfiddle，http://jsfiddle.net/B77G2/2/

问题是，当我将文本放入div时，div向下移动（jsfiddle中带有home id的div中有文本，你可以删除t ## e文本以查看它是否正常工作） 。如果div中没有​​文本，它看起来很好并且与其他div一致，就像它应该的那样。

即使我正在使用自动换行，文本也会脱离div。

为什么会发生这种情况？我该如何解决？

在jsfiddle中显示所有内容都已缩小，我希望我的问题很清楚。

这是html

<div id="container">
        <div class="fade" id="fade1" onclick="slide('prev')"><</div>
        <div class="fade" id="fade2" onclick="slide('next')">></div>

        <div id="sliding-container">
            <div class="slide leftmost" id="followme">
            </div>

            <div class="slide left" id="projects">

            </div>

            <div class="slide current" id="home">
                <p>Y u do dis :( fjsdahkfjdhsjfhdkjfsdjhfjsk djskfhdjfurt</p> // <---- the div thats being shown in the middle
            </div>

            <div class="slide right" id="knowledge">

            </div>

            <div class="slide rightmost" id="contact">

            </div>
        </div>

    </div>

Answer 1

似乎是vertical-align问题。尝试明确设置：

.slide { vertical-align:top; }

Fiddle

浏览器有一个稍微复杂的算法，用于为浮动元素或baseline显示计算vertical-align（默认值）inline-block。给它一个明确的top值通常可以解决问题。

---

哦，我差点忘了添加为什么线没有断线。这很简单：您的white-space:nowrap将继承到后代元素，并强制文本在一行中。您所要做的就是在到达需要word-wrap的文本内容之前重置它，所以：

.slide { white-space: normal; word-wrap: break-word; }

Fiddle

---

对于vertical-align解释，它有点复杂，以下是默认vertical-align值的spec - baseline：

  

将元素的“字母”基线与父元素的“字母”基线对齐。如果内联元素没有“字母”基线，则将框的底部（包括替换元素的边距）与父级的“字母”基线对齐。如果没有父元素或者此元素与其父元素之间存在流向取向变化，则主导基线将设置为“字母”，否则将设置为“无变化”。

更好地用一个例子来解释。打开此fiddle。我在幻灯片之间添加了一些文本，代表父母的字母baseline。 baseline是此图片中的红线：

如您所见，当孩子有字母基线时，父和子字母基线都按照规范的第一行对齐：“将元素的'字母'基线与'字母'基线对齐父元素。“

其他同级幻灯片没有任何非空/仅空白空间的TextNodes，因此它们没有要与之对齐的字母基线，并且规范的第二个语句开始执行：“如果内联元素没有有一个'字母'基线，对齐框的底部，包括其边距与父母的'字母'基线。“