我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
我只需要设置填充:-whateverYouWantpx;
其他回答
我认为使用
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>
您可以选择高度:100%和宽度。这使得div不大于其内容。
在Firebug中我发现了属性值-moz fit content,它完全符合OP的要求,可以如下使用:
width: -moz-fit-content;
虽然它只在Firefox上运行,但我找不到其他浏览器(如Chrome)的等效版本。
您需要一个具有CSS所称的收缩以适应宽度的块元素,而规范并没有提供一种获得这种东西的好方法。在CSS2中,缩小尺寸并不是一个目标,而是指处理浏览器“必须”凭空获得宽度的情况。这些情况包括:
浮动绝对定位元件内联块元素表元素
当没有指定宽度时。我听说他们想在CSS3中添加你想要的内容。现在,就用上面的一个吧。
不直接曝光该功能的决定可能看起来很奇怪,但有充分的理由。它很贵。缩小到适合意味着至少设置两次格式:在知道元素的宽度之前,不能开始设置元素的格式,并且不能计算整个内容的宽度。此外,人们不需要像想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的div?也许你只需要表格标题。