如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

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

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

2010-08-25 19:36:26

其他回答

CSS2兼容解决方案应使用：

.my-div
{
    min-width: 100px;
}

您也可以浮动div，这将迫使它尽可能小，但如果div中有任何内容浮动，则需要使用clearfix：

.my-div
{
    float: left;
}

2009-01-16 16:13:07

只需使用display：inline；（或空白：nowrap；）。

我希望你觉得这很有用。

2014-10-05 09:36:06

我的CSS3 flexbox解决方案有两种风格：顶部的表现像span，底部的表现像div，在包装器的帮助下获取所有宽度。它们的类分别是“top”、“bottom”和“bottomwrapper”。

正文{字体系列：无衬线；}.顶部{显示：-webkit内联flex；显示：内联flex；}.顶部，.底部{背景色：#3F3；边框：2px实心#FA6；}/*底部包装器将占据其余宽度*/.底部包装{显示：-webkit flex；显示：柔性；}表{边界塌陷：塌陷；}表格，th，td{宽度：280px；边框：1px实心#666；}第{背景色：#282；颜色：#FFF；}标准差{颜色：#444；}第，天{填充：0 4px 0 4px；}这是吗<div class=“top”><表><tr>操作系统</th><th>版本</th></tr><tr><td>OpenBSD</td><td>5.7</td></tr><tr><td>Windows</td><td>请升级到10</标准差></tr></table></div>你在找什么？<br>或者可能是。。。<div class=“bottomwrapper”><div class=“bottom”><表><tr>操作系统</th><th>版本</th></tr><tr><td>OpenBSD</td><td>5.7</td></tr><tr><td>Windows</td><td>请升级到10</标准差></tr></table></div></div>这就是你要找的。

2016-07-14 19:33:56

尝试使用width:max-content属性根据div的内容大小调整其宽度。

试试这个例子，

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

2020-08-31 09:30:01

我尝试了div.classname｛display：table cell；｝，结果成功了！

2013-03-07 17:37:59

如何使div不大于其内容？

推荐文章

最新文章

标签