html - 使用行内 block 显示，内容不向左浮动

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; 
}

fiddle 引用: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