0

我有一块宽度未知的文本，我想在它之后放置另一个文本，它总是会紧贴最后一个单词。如果第一个块是一行，那么将它们都设置为 'inline' 或 'inline-block' 就足够了，但如果第一个块多于一行，则第二个块总是转到下一行。

代码：

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 中。

4

6 回答 6

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;
}
于 2013-09-27T09:47:04.877 回答
1

您的文本被下推，因为如果您有一个“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;
}

希望我有所帮助。

于 2013-09-27T10:22:44.390 回答
1

摆脱float:left;您的小提琴似乎可以满足您的需求。

于 2013-09-27T09:46:57.767 回答
0

像这样

演示

css

#new {
    background: red;

}

div {

    display: inline-block;
}
于 2013-09-27T09:48:45.723 回答
0

只需删除float，如果两个 div 就display: inline足够了。

于 2013-09-27T09:47:36.503 回答
0

小提琴

你可以利用跨度

<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>
于 2013-09-27T09:48:37.550 回答