我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
div{
width:auto;
height:auto;
}
其他回答
如果我们定义一个全局变量并将其用于这两个变量会怎么样。
:根目录{--表格宽度:400px;}.容器{width:var(--表格宽度);边框:1px实心黑色;//易于可视化}.内表{width:var(--表格宽度);边框:1px纯红色;//易于可视化}<div class=“container”><table class=“inner table”><tr><td>美国广播公司</td></tr></table></div>
仅仅
<div style="display: inline;">
<table>
</table>
</div>
您可以使用内联块作为@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/
display:inline块为元素添加额外的边距。
我建议这样做:
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖金:你现在只需添加margin:0auto,就可以轻松地将这个新奇的#元素居中。
CSS2兼容解决方案应使用:
.my-div
{
min-width: 100px;
}
您也可以浮动div,这将迫使它尽可能小,但如果div中有任何内容浮动,则需要使用clearfix:
.my-div
{
float: left;
}