使塊級元素具有像內聯元素一樣的調整寬度？

Question

默認情況下，即使沒有內容，塊級元素的寬度也是100％，它會橫向占據其父元素的空間。

另一方面，內聯元素根據內容調整寬度。 如果內容很長，則元素變寬，如果內容短，則寬度縮小。

這是一個演示 。

我想要實現的是使塊級元素的寬度根據內聯元素的內容進行調整。 我該怎么做？

注意：

• 我希望塊元素是塊，而不是內聯塊或內聯。
• 我想避免浮動，我認為它可以在沒有浮動元素的情況下實現。

Answer 1

我記得桌子的寬度正是我試圖模仿的。 它根據內容的長度進行調整。 我找到了HTML 4的默認樣式表，表的display屬性設置為“table”，所以我嘗試了div並且它可以工作：

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

演示

Answer 2

你可以像這樣將塊元素浮動到左邊

CSS

div { background:yellow; float: left;}

我的小提琴

您可以稍后破壞元素，或者在浮動div之后使用<div style="clear: both;"></div> ...

我的小提琴

Answer 3

好吧，我建議你添加一個div或span with display: inline-block INSIDE你的主div與display: block 。 然后使用javascript計算內部元素的大小。 然后將父元素的寬度設置為相同的值。

無論如何，你的要求很奇怪

Answer 4

我會為你提供小樣品

• HTML

lorem ipsum dolor
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor more longger

• CSS

   div { background:yellow; } span { background:orange; float:left;display:inline; width:auto;padding:0 3px; border-right:1px solid red;} 

元素跨度是左浮動，寬度取決於內容。