我的布局类似于:

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

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


当前回答

解决方案是将div设置为display:inline块。

其他回答

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

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

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

我知道人们有时不喜欢表格,但我必须告诉你,我尝试了css内联技巧,它们在一些div中有点奏效,但在其他div中没有,所以,将扩展的div封装在表格中真的很容易。。。和它可以有内联属性,也可以没有内联属性,但表仍然是保持内容总宽度的表。=)

这里有一个工作演示-

.浮动框{显示:-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>

个人而言,我只是这样做:

HTML代码:

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

CSS代码:

div {
    display: inline;
}

如果在div上应用浮点数,它也会起作用,但显然,您需要在下一个HTML元素中应用“清除两者”的CSS规则。

第二部分{宽度:配合内容;}<div><表></table></div>