2

默认情况下，即使没有内容，块级元素也有 100% 的宽度，它水平占据其父元素的空间。

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

在此处输入图像描述

这是一个演示。

我想在这里实现的是使块级元素的宽度可以根据其内容（如内联元素）进行调整。我将如何做到这一点？

笔记：

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

4 回答 4

2

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

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

演示

于 2012-10-09T07:55:12.467 回答
1

您可以像这样将块元素向左浮动

CSS

div { background:yellow; float: left;}

我的小提琴

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

我的小提琴

于 2012-10-09T07:16:37.610 回答
1

好吧，我建议你在你的主 div中添加一个 div 或display: inline-block spandisplay: block。然后使用javascript计算内部元素的大小。然后将父元素的宽度设置为相同的值。

反正你的要求很奇怪

于 2012-10-09T07:21:00.387 回答
0

我给你小样

  • 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;}

元素跨度是向左浮动的，宽度取决于内容。

于 2012-10-09T07:21:42.490 回答