我的布局类似于:

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

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


当前回答

在Firebug中我发现了属性值-moz fit content,它完全符合OP的要求,可以如下使用:

width: -moz-fit-content;

虽然它只在Firefox上运行,但我找不到其他浏览器(如Chrome)的等效版本。

其他回答

您可以使用内联块作为@user473598,但要注意较旧的浏览器。。

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla根本不支持内联块,但他们有-moz内联堆栈,这几乎是一样的

内联块显示属性周围的一些跨浏览器:https://css-tricks.com/snippets/css/cross-browser-inline-block/

您可以在以下位置看到一些具有此属性的测试:https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

div{
  width:auto;
  height:auto;
}

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

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

width: intrinsic;

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

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

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

display: inline-block;

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

您可以尝试此代码。按照CSS部分中的代码操作。

第二部分{显示:内联块;填充:2vw;背景色:绿色;}表{宽度:70vw;背景色:白色;}<div><table border=“colapsed”><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr></table></div>