Div在文本插入时放错位置，文本离开div [英] Div gets misplaced on text insertion and text goes out of div

问题描述

这里是问题的jsfiddle， http://jsfiddle.net/B77G2/2/

Here is the jsfiddle of the problem, http://jsfiddle.net/B77G2/2/

问题是，当我把文本放在div中时，div向下移动（div在jsfiddle中的home id中有文本，可以删除t ##e文本，看它工作正常）。如果在div中没有​​文本，它看起来很好，并且与其它div一样。

The problem is, that when I put text in a div, the div moves down(the div with the home id in the jsfiddle has the text in it, you can remove t## e text to see it working properly). If there is no text in a div, it appears fine and in line with the other divs like its supposed to.

并且文本出了div，即使我

And the text goes out of the div even though I'm using word-wrap.

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

Why is this happenning and how can I fix it?

以下是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>

推荐答案

看起来像 vertical-align 。尝试明确设置：

Seems like a vertical-align issue. Try setting it explicitly:

.slide { vertical-align:top; }

Fiddle

浏览器有一个稍微复杂的算法来计算 baseline （默认值） code> vertical-align 用于浮动元素或 inline-block / code> value通常会解决这个问题。

Browsers have a slightly complex algorithm for computing the baseline (default value) of vertical-align for floated elements or with inline-block display. Giving it a explicitly top value usually fixes the issue.

哦，我几乎忘了添加为什么不行打破。它很简单：你的 white-space：nowrap 继承到后代元素，它强制文本在一行。所有你需要做的是在到达需要 word-wrap 的文本内容之前重置它，因此：

Oh I almost forgot to add why the line isn't breaking. It is simple: Your white-space:nowrap is inherited to descendants elements and it forces text to be in a single line. All you have to do is reset it before reaching the text content which require word-wrap, so:

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

Fiddle

> vertical-align 解释，它有点复杂，这里是 spec for the default vertical-align value - baseline ：

For the vertical-align explanation, it is a little complex, here is the spec for the default vertical-align value - baseline:

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

Align the ‘alphabetic’ baseline of the element with the ‘alphabetic’ baseline of the parent element. If the inline element doesn't have an ‘alphabetic’ baseline, align the bottom of the box, including its margin for replaced elements, with the parent's ‘alphabetic’ baseline. The dominant baseline is set to ‘alphabetic’ if there is no parent or if there is a flow orientation change between this element and its parent, otherwise it is set to ‘no-change’.

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

Better explain with an example. Open this fiddle. I've added some text in-between the slides which represent the parent's alphabetic baseline. The baseline is the red line in this image:

正如你所看到的，当孩子有一个字母基线时，父母和孩子字母基线根据规范的第一行对齐：将元素的'字母'基线与父元素的'字母'基线对齐。

As you can see, when the child has an alphabetic baseline, both parent and child alphabetic baselines are aligned as per the first line of the spec: "Align the ‘alphabetic’ baseline of the element with the ‘alphabetic’ baseline of the parent element."

其他同级幻灯片没有任何非空/仅有白色空间的TextNodes，因此它们没有与之对齐的字母基线，而第二个语句spec：如果内联元素没有'字母'基线，请将框的底部，包括其边距与父字符的'字母'基线对齐。

The other sibling slides do not have any non empty/white-space-only TextNodes, therefore they do not have an alphabetic baseline to align with and the second statement of the spec kicks in: "If the inline element doesn't have an ‘alphabetic’ baseline, align the bottom of the box, including its margin with the parent's ‘alphabetic’ baseline."

这篇关于Div在文本插入时放错位置，文本离开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！