Question

我有一个宽度未知的文本块，我想在它之后放置另一个文本，它总是坚持到最后一个单词。如果第一个块是一行，那么将它们设置为“内联”或“内联块”就足够了，但如果第一个块多于一行，则第二个块总是转到下一行。

代码：

HTML

<div id="text">sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.</div>
<div id="new">New</div>

CSS

div {
    float: left;
    display: inline-block;
}

http://jsfiddle.net/nmuUd/1/

'新'需要始终坚持上一个区块的最后一个字。我怎么能这样做？

编辑：澄清一下，我无法更改标记。内容总是在两个独立的div中。

Answer 1

摆脱你小提琴上的float:left;似乎正在寻找你正在寻找的东西。

Answer 2

像这样：

<强> HTML

<div id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. 
<div id="new">New</div></div>

<强> CSS

#new {
    background: red;
}

div {
    display: inline;
}

Answer 3

您的文字被按下，因为如果您有一个'inline-block'元素，并且文本足够长以填充父容器的100％宽度，则第二行也将具有100％宽度。这就是为什么第二个div将开始渲染到第一个div之下。如果你想让你的div在一行中，你必须给它们'display：inline;'属性。

如果它是静态和短文本，例如作者姓名，则可以使用伪元素'：after'，如下所示：

div.text:after{
    content: ' put you text here'; /*remember to put whitespace on the beginning*/
    background-color: red;
}

但是如果你想使用'div'作为内联元素，只需使用'display：inline;'没有浮动：

div.text{
    display: inline;
}

希望我帮助过。

Answer 4

如果两个div float足够，请删除display: inline。

Answer 5

fiddle

你可以使用span

<span id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. </span>
    <span id="new">New</span>

Answer 6

喜欢这个

<强> demo

<强> CSS

#new {
    background: red;

}

div {

    display: inline-block;
}

CSS如何使文本始终与段落内联

6 个答案: