html - 使用内联块显示，内容不向左浮动

Question

我希望 div 元素的宽度等于其中内容的宽度，并且（更重要的是）此 div 之后的任何内容都不会从 div 的右侧开始（好像 div 是float:left;），但显示在当前 div 下方。我知道一种方法是，在这个 div 之后，我创建另一个空 div 和 set 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 到特定 `inline-block` 项目之前/之后的换行符

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