我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
你的问题的答案在于未来,我的朋友。。。
即“内在”将随最新的CSS3更新而来
width: intrinsic;
不幸的是IE落后于它,所以它还不支持它
更多信息:CSS内部和外部尺寸模块级别3和我可以使用吗?:内在和外在尺寸。
现在,您必须满足<span>或<div>设置为
display: inline-block;
其他回答
CSS2兼容解决方案应使用:
.my-div
{
min-width: 100px;
}
您也可以浮动div,这将迫使它尽可能小,但如果div中有任何内容浮动,则需要使用clearfix:
.my-div
{
float: left;
}
您可以选择高度:100%和宽度。这使得div不大于其内容。
我认为使用
display: inline-block;
但我不确定浏览器的兼容性。
另一种解决方案是将您的div包装在另一个div中(如果您想保持块行为):
HTML格式:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
尝试显示:inline block;。为了实现跨浏览器兼容,请使用以下css代码。
第二部分{显示:内联块;显示:-moz内联堆栈;缩放:1;*显示:内联;边框样式:实心;边框颜色:#0000ff;}<div><表><tr><td>第1列</td><td>第2列</td><td>第3列</td></tr></table></div>
评论中提到了这一点,在其中一个答案中很难找到:
如果出于任何原因使用display:flex,则可以改用:
div {
display: inline-flex;
}
这在浏览器中也得到广泛支持。