Question

我希望div元素的宽度等于其中内容的宽度，并且（更重要的是）此div之后的任何内容都不会从div的右边开始（就像div一样）是float:left;），但显示在当前div下方。我知道一种方法是在这个div之后，我创建另一个空div并设置clear:both;，但在我的情况下，这不是很好。

Answer 1

我认为以下内容可能与您的需求接近：

HTML演示代码为：

<div>
Some text may be before the element.
<div id="info">This is my bible!</div>And some text may follow. the element.
</div>

CSS样式是：

#info {
    display:inline;
    background-color:#CFFF9F;
    color:black;
    font-weight:normal;
    border:black solid 1px;
}
#info:after {
    content:"\A"; 
    white-space: pre; 
}

小提琴参考：http://jsfiddle.net/audetwebdesign/6FNQc/

说明如何运作

使用:after生成一些内容（在CSS中称为伪元素）。 “\ A”被解释为换行符（换行符），前提是保留空格，因此您需要设置white-space: pre。最后，元素必须是内联的，因此display: inline。

相关参考文献：
CSS to line break before/after a particular `inline-block` item

要了解有关“\ A”（换行）的更多信息，请参阅：
http://www.w3.org/TR/CSS21/syndata.html#strings

使用内联块显示而不向左浮动内容

1 个答案: