我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
在Firebug中我发现了属性值-moz fit content,它完全符合OP的要求,可以如下使用:
width: -moz-fit-content;
虽然它只在Firefox上运行,但我找不到其他浏览器(如Chrome)的等效版本。
其他回答
这似乎在所有浏览器上都很适用。示例是我在网上和时事通讯中使用的实际广告。只需更改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>
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack–对内联块样式的跨浏览器支持(2007-11-19)。
不知道这将出现在什么上下文中,但我相信CSS样式的属性float(向左或向右)将产生这种效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。
如果我错了,请纠正我,我不是100%确定,目前无法自己测试。
解决方案是将div设置为display:inline块。
<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封装在表格中真的很容易。。。和它可以有内联属性,也可以没有内联属性,但表仍然是保持内容总宽度的表。=)