1

这是问题的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>
4

1 回答 1

5

好像是个vertical-align问题。尝试明确设置：

.slide { vertical-align:top; }

小提琴

浏览器有一个稍微复杂的算法来计算浮动元素或显示的baseline（默认值） 。给它一个明确的值通常可以解决这个问题。vertical-aligninline-blocktop

哦，我差点忘了补充为什么线路没有断线。很简单：Yourwhite-space:nowrap被继承给后代元素，它强制文本在一行中。您所要做的就是在到达需要的文本内容之前将其重置word-wrap，因此：

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

小提琴

对于vertical-align解释，它有点复杂，这是默认值的规范vertical-align- baseline：

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

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

在此处输入图像描述

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

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

于 2013-02-17T06:41:30.363 回答