我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
您可以选择高度:100%和宽度。这使得div不大于其内容。
其他回答
您可以尝试此代码。按照CSS部分中的代码操作。
第二部分{显示:内联块;填充:2vw;背景色:绿色;}表{宽度:70vw;背景色:白色;}<div><table border=“colapsed”><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr></table></div>
这似乎在所有浏览器上都很适用。示例是我在网上和时事通讯中使用的实际广告。只需更改div的内容。它将根据您指定的填充量进行调整和收缩。
<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
<font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
</font>
</div>
div{
width:auto;
height:auto;
}
您可以选择高度:100%和宽度。这使得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>