Question

http://jsfiddle.net/nicktheandroid/SsfpG/

我不明白为什么这些内联元素导致段落停止换行，或者没有完成在内联元素之前放置文本，换句话说：有些东西在DIV设置为{之前“导致换行符{1}}，即使我只是将其设置为display:inline-block。如果我将DIV更改为SPAN，那么它可以工作，但是如果我将DIV设置为display:inline或display:inline那么它应该像SPAN一样工作..这应该非常简单！哎呀！

CSS

display:inline-block

HTML

p {
    position:relative;
}

.trigger {
    display:inline-block;
    position:relative; 
}

.toolTip {
    display:none;
    position:absolute;
    top:0;
    left:0;

}

.triangle {
    display:inline;
    position:absolute;
    top:0;
    left:0;
}

Answer 1

你不能放block level elements inside paragraphs。由于div是块级元素，因此浏览器的行为就像你写的那样：

<p>foo bar</p>
<div class="trigger">....

这与人们在谈论CSS时讨论内联与阻止时略有不同。在应用CSS之前，在浏览器读取HTML时确定段落元素的结尾。

另一方面，跨度是内联元素，因此可行。

Answer 2

使用内联元素替换div将起作用：

<span class="trigger">TRIGGER TRIGGER
    <span class="toolTip">
        This part is hidden right now, this will be the tooltip, for testing
        purposes it is hidden.
        <span class="triangle"></span>
    </span>
</span>

内联元素导致文本停止换行？很简单？

2 个答案: