我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
这似乎是一个13年前的问题。
.div{
display:inline-block;
}
or
.div{
display:inline-flex;
}
现在可以工作几天,没有任何兼容性问题。
其他回答
我通过在div标记中添加span标记,并将CSS格式从外部div标记移动到新的内部span标记,解决了一个类似的问题(我不想使用display:inline块,因为项目居中)。如果display:inline块不是适合您的答案,那么就把它作为另一个备选方案。
对我有用的是:
display: table;
(在Firefox和Google Chrome上测试)。
我们可以对div元素使用以下两种方法中的任意一种:
display: table;
or,
display: inline-block;
我更喜欢使用display:table;,因为它自己处理所有额外的空间。而display:inline块需要一些额外的空间修复。
我认为使用
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>