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

【问题标题】：Using inline-block display without the content floating left使用内联块显示，内容不向左浮动
【发布时间】：2013-03-09 11:37:10
【问题描述】：

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

【问题讨论】：

您能发布您的 HTML 和 CSS 代码吗？
你能具体说明为什么这不是可取的吗？
在你当前的 div 后面加一个<br>？
@slacker，整个网站已经在运行，必须通过整个代码增益并插入空的 div 标签对我来说是最后的手段（或者我想说服自己）。如果可以只玩css，那将是我的一天！
@G Thuo，我认为你应该按照核心建议发布一些 html 和 css

标签： html css

【解决方案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。

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

【讨论】：