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

小提琴

浏览器有一个稍微复杂的算法,用于计算浮动元素或显示的baseline(默认值).赋予它明确的价值通常可以解决问题.vertical-aligninline-blocktop

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

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

小提琴

为了vertical-align解释,它有点复杂,这里是默认值的规范vertical-align - baseline:

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

用一个例子更好地解释.打开这个小提琴.我在幻灯片之间添加了一些代表父母字母的文本baseline.这baseline是这张图片中的红线:

如您所见,当孩子具有字母基线时,父和子字母基线都按照规范的第一行对齐:"将元素的'字母'基线与父元素的'字母'基线对齐".

其他兄弟幻灯片没有任何非空/仅空白空间的TextNodes,因此它们没有要与之对齐的字母基线,并且规范的第二个语句开始出现:"如果内联元素没有'字母'基线,对齐框的底部,包括其边距与父母的'字母'基线."