如何使div不大于其内容？

我的布局类似于：

<div>
    <table>
    </table>
</div>

我希望div只扩展到表的宽度。

当前回答

这似乎是一个13年前的问题。

.div{
display:inline-block;
}

.div{
display:inline-flex;
}

现在可以工作几天，没有任何兼容性问题。

2022-07-05 11:10:37

其他回答

我认为使用

display: inline-block;

但我不确定浏览器的兼容性。

另一种解决方案是将您的div包装在另一个div中（如果您想保持块行为）：

HTML格式：

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

2009-01-16 16:41:43

这似乎在所有浏览器上都很适用。示例是我在网上和时事通讯中使用的实际广告。只需更改div的内容。它将根据您指定的填充量进行调整和收缩。

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</div>

2012-04-29 21:01:37

我通过在div标记中添加span标记，并将CSS格式从外部div标记移动到新的内部span标记，解决了一个类似的问题（我不想使用display:inline块，因为项目居中）。如果display:inline块不是适合您的答案，那么就把它作为另一个备选方案。

2012-08-25 18:54:02

尝试使用width:max-content属性根据div的内容大小调整其宽度。

试试这个例子，

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

2020-08-31 09:30:01

我尝试了div.classname｛display：table cell；｝，结果成功了！

2013-03-07 17:37:59

如何使div不大于其内容？

推荐文章

最新文章

标签