使块级元素具有像内联元素一样的调整宽度？

Question

默认情况下，即使没有内容，块级元素的宽度也是100％，它在水平上占据了它的父元素之间的空间。

另一方面，

内联元素根据其内容调整其宽度。如果内容很长，则元素变宽，如果内容短，则宽度缩小。

这里是demo。

我想要实现的是使块级元素的宽度根据内容元素的内容进行调整。我该怎么做？

注意：

• 我希望块元素是块，而不是内联块或内联。
• 我想要 为了避免浮动，我认为它可以在没有浮动的情况下实现 元件。

Answer 1

我记得桌子的宽度正是我试图模仿的。它根据内容的长度进行调整。我找到了HTML 4的默认样式表，表格的显示属性设置为“表格”，所以我尝试了div并且它可以工作：

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

Demo

Answer 2

您可以将块元素浮动到左侧

CSS

div { background:yellow; float: left;}

My fiddle

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

My fiddle

Answer 3

好吧，我建议您使用display: inline-block添加带有display: block INSIDE 主div的div或span。然后使用 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;}
  

元素span是左浮动，宽度取决于内容。