我的布局类似于:

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

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


当前回答

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack–对内联块样式的跨浏览器支持(2007-11-19)。

其他回答

div{
  width:auto;
  height:auto;
}

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

display: table;

or,

display: inline-block; 

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

我认为使用

display: inline-block;

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


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

HTML格式:

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

CSS:

.yourdiv
{
    display: inline;
}

这似乎在所有浏览器上都很适用。示例是我在网上和时事通讯中使用的实际广告。只需更改div的内容。它将根据您指定的填充量进行调整和收缩。

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</div>

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

width: -moz-fit-content;

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