如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

这里有一个工作演示-

.浮动框{显示：-moz内联堆栈；显示：内联块；宽度：配合内容；高度：配合内容；宽度：150px；高度：75px；边距：10px；边框：3px实心#73AD21；}<h2>The Way正在使用内联块</h2>CSS中还添加了支持元素。＜div＞<div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div></div>

2016-03-23 09:45:09

其他回答

尝试显示：inline block；。为了实现跨浏览器兼容，请使用以下css代码。

第二部分{显示：内联块；显示：-moz内联堆栈；缩放：1；*显示：内联；边框样式：实心；边框颜色：#0000ff；}＜div＞<表><tr><td>第1列</td><td>第2列</td><td>第3列</td></tr></table></div>

2017-06-21 20:48:46

只需将样式放入CSS文件

div { 
    width: fit-content; 
}

2018-04-21 16:11:32

你的问题的答案在于未来，我的朋友。。。

即“内在”将随最新的CSS3更新而来

width: intrinsic;

不幸的是IE落后于它，所以它还不支持它

更多信息：CSS内部和外部尺寸模块级别3和我可以使用吗？：内在和外在尺寸。

现在，您必须满足＜span＞或＜div＞设置为

display: inline-block;

2013-12-11 13:07:16

尝试使用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元素使用以下两种方法中的任意一种：

display: table;

or,

display: inline-block;

我更喜欢使用display：table；，因为它自己处理所有额外的空间。而display:inline块需要一些额外的空间修复。

2016-09-30 05:00:55

如何使div不大于其内容？

推荐文章

最新文章

标签