我的布局类似于:

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

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


当前回答

CSS2兼容解决方案应使用:

.my-div
{
    min-width: 100px;
}

您也可以浮动div,这将迫使它尽可能小,但如果div中有任何内容浮动,则需要使用clearfix:

.my-div
{
    float: left;
}

其他回答

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

width:1px;
white-space: nowrap;

对我来说很好:)

只需设置宽度和高度以适合内容。这很简单。

div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

我正在添加填充:10px;。如果省略了它,div元素将完全与表保持一致,看起来有点笨拙。填充将在元素的边界与其内容之间创建给定的空间。但这是你的愿望,不是强制性的。

仅仅

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

我的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>这就是你要找的。