我的布局类似于:

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

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


当前回答

对我有用的是:

display: table;

(在Firefox和Google Chrome上测试)。

其他回答

您可以使用内联块作为@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/

有两种更好的解决方案

显示:内联块;或显示:表格;

其中有两个显示:表;更好,因为显示:内联块;增加额外的边距。

用于显示:内联块;可以使用负边距方法来修复多余的空间

我只需要设置填充:-whateverYouWantpx;

我认为使用

display: inline-block;

但我不确定浏览器的兼容性。


另一种解决方案是将您的div包装在另一个div中(如果您想保持块行为):

HTML格式:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

这里有一个工作演示-

.浮动框{显示:-moz内联堆栈;显示:内联块;宽度:配合内容;高度:配合内容;宽度:150px;高度:75px;边距:10px;边框:3px实心#73AD21;}<h2>The Way正在使用内联块</h2>CSS中还添加了支持元素。<div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div><div class=“floating box”>浮动框</div></div>