我的布局类似于:

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

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


当前回答

尝试使用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>

其他回答

我们可以对div元素使用以下两种方法中的任意一种:

display: table;

or,

display: inline-block; 

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

我的CSS3 flexbox解决方案有两种风格:顶部的表现像span,底部的表现像div,在包装器的帮助下获取所有宽度。它们的类分别是“top”、“bottom”和“bottomwrapper”。

正文{字体系列:无衬线;}.顶部{显示:-webkit内联flex;显示:内联flex;}.顶部,.底部{背景色:#3F3;边框:2px实心#FA6;}/*底部包装器将占据其余宽度*/.底部包装{显示:-webkit flex;显示:柔性;}表{边界塌陷:塌陷;}表格,th,td{宽度:280px;边框:1px实心#666;}第{背景色:#282;颜色:#FFF;}标准差{颜色:#444;}第,天{填充:0 4px 0 4px;}这是吗<div class=“top”><表><tr>操作系统</th><th>版本</th></tr><tr><td>OpenBSD</td><td>5.7</td></tr><tr><td>Windows</td><td>请升级到10</标准差></tr></table></div>你在找什么?<br>或者可能是。。。<div class=“bottomwrapper”><div class=“bottom”><表><tr>操作系统</th><th>版本</th></tr><tr><td>OpenBSD</td><td>5.7</td></tr><tr><td>Windows</td><td>请升级到10</标准差></tr></table></div></div>这就是你要找的。

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

.div{
display:inline-block;
}

or

.div{
display:inline-flex;
}

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

仅仅

<div style="display: inline;">
    <table>
    </table>
</div>

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