如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

个人而言，我只是这样做：

HTML代码：

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

CSS代码：

div {
    display: inline;
}

如果在div上应用浮点数，它也会起作用，但显然，您需要在下一个HTML元素中应用“清除两者”的CSS规则。

其他回答

我认为使用

display: inline-block;

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

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

HTML格式：

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

CSS:

.yourdiv
{
    display: inline;
}

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

display: table;

or,

display: inline-block;

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

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

这将使父div宽度与最大元素宽度相同。

我只需要设置填充：-whateverYouWantpx；

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

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

推荐文章