使用內嵌塊顯示而不將內容左浮動

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