协慌网

我的布局类似于：

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

我想div只能扩展到我的table变宽。

解决方案是将div设置为display: inline-block 。

你想要一个块元素，它具有 CSS 调用的缩小宽度，而规范并没有提供一种有福的方式来获得这样的东西。在 CSS2 中，缩小到适合不是目标，而是意味着处理浏览器 “必须” 凭空捏造宽度的情况。那些情况是：

• 浮动
• 绝对定位元素
• 内联块元素
• 表元素

没有指定宽度时。我听说他们想在 CSS3 中添加你想要的东西。现在，请使用上述之一。

不直接公开该功能的决定可能看起来很奇怪，但有充分的理由。它是昂贵的。缩小到适合意味着格式化至少两次：在知道元素的宽度之前，不能开始格式化元素，并且无法计算整个内容的宽度。另外，人们可能不会像人们想象的那样经常使用缩小到合适的元素。为什么你的桌子周围需要额外的 div？也许表格标题就是您所需要的。

我觉得用

display: inline-block;

会工作，但我不确定浏览器的兼容性。

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

HTML：

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

CSS：

.yourdiv
{
    display: inline;
}