我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
尝试使用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>
其他回答
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父div宽度与最大元素宽度相同。
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack–对内联块样式的跨浏览器支持(2007-11-19)。
.outer{
width:fit-content;
display: flex;
align-items: center;
}
.outer .content{
width: 100%;
}
<div class=outer>
<div class=content>
Add your content here
</div>
</div>
你的问题的答案在于未来,我的朋友。。。
即“内在”将随最新的CSS3更新而来
width: intrinsic;
不幸的是IE落后于它,所以它还不支持它
更多信息:CSS内部和外部尺寸模块级别3和我可以使用吗?:内在和外在尺寸。
现在,您必须满足<span>或<div>设置为
display: inline-block;
我们可以对div元素使用以下两种方法中的任意一种:
display: table;
or,
display: inline-block;
我更喜欢使用display:table;,因为它自己处理所有额外的空间。而display:inline块需要一些额外的空间修复。