我的布局类似于:

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

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


当前回答

不知道这将出现在什么上下文中,但我相信CSS样式的属性float(向左或向右)将产生这种效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。

如果我错了,请纠正我,我不是100%确定,目前无法自己测试。

其他回答

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

我知道人们有时不喜欢表格,但我必须告诉你,我尝试了css内联技巧,它们在一些div中有点奏效,但在其他div中没有,所以,将扩展的div封装在表格中真的很容易。。。和它可以有内联属性,也可以没有内联属性,但表仍然是保持内容总宽度的表。=)

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

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

width: intrinsic;

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

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

现在,您必须满足<span>或<div>设置为

display: inline-block;

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

div {

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

}

我正在添加填充:10px;。如果省略了它,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>这就是你要找的。

我只需要设置填充:-whateverYouWantpx;