如何使 div 不大于其内容？
Posted
技术标签:
【中文标题】如何使 div 不大于其内容？【英文标题】：How can I make a div not larger than its contents? 【发布时间】：2010-10-01 20:13:33 【问题描述】：我的布局类似于：
<div>
<table>
</table>
</div>
我希望 div 仅扩展到我的 table 的宽度。
【问题讨论】：
这种效果被称为“收缩包装”，正如回答的那样，有几种方法可以做到这一点（浮动、内联、最小/最大宽度），所有这些都有副作用可供选择跨度> 以下答案都对我有用，除了：display: table -OR- height: fit-content !!!
【参考方案1】：
只需将宽度和高度设置为适合内容。很简单。
div
width: fit-content;
height: fit-content;
padding: 10px;
我正在添加 padding: 10px;。如果省略，div 元素将完全贴在表格上，看起来有点笨拙。填充将在元素的边框和它的内容之间创建给定的空间。但这是你的愿望，不是强制性的。
【讨论】：
除了adding: 10px; 部分之外，这与 2013 年 5 月 27 日 0:41 发布的答案相同【参考方案2】：
.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>
【讨论】：
【参考方案3】：div
width:fit-content;
<div>
<table>
</table>
</div>【讨论】：
必须是width: -moz-fit-content; 才能在 Firefox 上工作。【参考方案4】：
尝试使用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>
【讨论】：
【参考方案5】：你可以试试这个代码。按照 CSS 部分中的代码进行操作。
div
display: inline-block;
padding: 2vw;
background-color: green;
table
width: 70vw;
background-color: white;
<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>【讨论】：
【参考方案6】：您可以使用height: 100% 和宽度供您选择。这使得 div 不会大于其内容。
【讨论】：
如果你设置高度 100% 它将是窗口总大小的 100%【参考方案7】：<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 ......并且......它可以有或没有 inline 属性，但表格仍然是要保存内容总宽度的表格。 =)
【讨论】：
【参考方案8】：我在div 中有一个span，只是将margin: auto 设置为容器div 对我有用。
【讨论】：
任何线索为什么会这样？【参考方案9】：有两个更好的解决方案
display: inline-block;
或
display: table;
在这两个中display:table; 更好，因为display: inline-block; 增加了一个额外的边距。
对于display:inline-block;，你可以使用负边距的方法来修复多余的空间
【讨论】：
【参考方案10】：如果我们定义一个全局变量并将其用于两者会怎样。
:root
--table-width: 400px;
.container
width:var(--table-width);
border: 1px solid black; // easy visualization
.inner-table
width:var(--table-width);
border: 1px solid red; // easy visualization
<div class="container">
<table class="inner-table">
<tr>
<td>abc</td>
</tr>
</table>
</div>【讨论】：
【参考方案11】：display: inline-block 为您的元素添加额外的边距。
我会推荐这个：
#element
display: table; /* IE8+ and all other modern browsers */
奖励：您现在还可以通过添加 margin: 0 auto 轻松地将新的 #element 居中。
【讨论】：
【参考方案12】：好的，在许多情况下，您甚至不需要做任何事情，因为默认情况下 div 将 height 和 width 设为自动，但如果不是您的情况，请应用 inline-block显示会为你工作......看看我为你创建的代码，它会做你想要的：
div
display: inline-block;
<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>【讨论】：
【参考方案13】：这在 cmets 中已经提到，很难在其中一个答案中找到，所以：
如果您出于某种原因使用display: flex，您可以改用：
div
display: inline-flex;
This is also widely supported across browsers.
【讨论】：
【参考方案14】：只需将样式放入您的 CSS 文件中
div
width: fit-content;
【讨论】：
【参考方案15】：您可以使用display: flex 作为父元素
#parentElement
display: flex;
flex-direction: column;
align-items: flex-start;
【讨论】：
【参考方案16】：您可以将inline-block 用作@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 根本不支持 inline-block，但他们有 -moz-inline-stack 大致相同
围绕inline-block显示属性的一些跨浏览器：
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/看到一些带有这个属性的测试
【讨论】：
【参考方案17】：试试display: inline-block;。要使其跨浏览器兼容，请使用以下 css 代码。
div
display: inline-block;
display:-moz-inline-stack;
zoom:1;
*display:inline;
border-style: solid;
border-color: #0000ff;
<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>【讨论】：
【参考方案18】：解决方案是将您的div 设置为display: inline-block。
【讨论】：
@leif81 您可以使用span 或div 或ul 或其他任何东西，重要的部分是您希望最小宽度的容器具有CSS 属性@987654326 @
请注意，一旦您设置了display: inline-block 属性，margin: 0 auto; 将无法按预期工作。在这种情况下，如果父容器有text-align: center;，那么inline-block 元素将水平居中。
添加到@SavasVedova 评论，记得将margin: 0 auto; 中的auto 更改为0（或您可以选择的任何值）。【参考方案19】：
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父 div 宽度与最大元素宽度相同。
【讨论】：
有没有办法我可以将其仅应用于垂直尺寸以最小化并保持水平大？【参考方案20】：我的 CSS3 flexbox 解决方案有两种风格：顶部的一个像 span 一样，底部的一个像 div，在包装器的帮助下占据所有宽度。它们的类分别是“top”、“bottom”和“bottomwrapper”。
body
font-family: sans-serif;
.top
display: -webkit-inline-flex;
display: inline-flex;
.top, .bottom
background-color: #3F3;
border: 2px solid #FA6;
/* bottomwrapper will take the rest of the width */
.bottomwrapper
display: -webkit-flex;
display: flex;
table
border-collapse: collapse;
table, th, td
width: 280px;
border: 1px solid #666;
th
background-color: #282;
color: #FFF;
td
color: #444;
th, td
padding: 0 4px 0 4px;
Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.【讨论】：
为display: inline-flex; 点赞。顺便说一句，这适用于 Chrome 62、firefox 57 和 safari 11 的前缀【参考方案21】：
div
width:auto;
height:auto;
【讨论】：
如果 div 包含内联（或内联块）元素并且它们的字体大小和行高与 div 本身不同，这将不起作用。【参考方案22】：我只想设置padding: -whateverYouWantpx;
【讨论】：
欢迎来到 Stack Overflow！请添加一些解释为什么此代码有助于 OP。这将有助于为未来的观众提供一个可以学习的答案。请参阅How to Answer 了解更多信息。 它会去掉一些尺寸的盒子，这样他就可以让盒子“不大于里面的东西”。 负填充不是无效的CSS吗？ 远非如此。其实我用过很多次了，完全合法。【参考方案23】：篡改 Firebug 我发现属性值 -moz-fit-content 正是 OP 想要的，可以按如下方式使用：
width: -moz-fit-content;
虽然它只适用于 Firefox，但我找不到其他浏览器（如 Chrome）的等效项。
【讨论】：
截至 2017 年 1 月，IE（所有版本，包括 Edge 和移动版）和 Opera Mini 不支持fit-content。 Firefox 仅支持宽度。其他浏览器也很好支持。【参考方案24】：
修订（如果您有多个孩子，则有效）： 您可以使用 jQuery（查看 JSFiddle 链接）
var d= $('div');
var w;
d.children().each(function()
w = w + $(this).outerWidth();
d.css('width', w + 'px')
);
不要忘记包含 jQuery...
See the JSfiddle here
【讨论】：
如果您的 div 有多个孩子，这将被破坏；它只是将 div 宽度设置为 first 孩子的宽度。 @MarkAmery 首先，在你投反对票之前，请仔细阅读问题，他们要求一个孩子。如果您真的很好奇如何处理多个孩子，请查看修改后的答案。【参考方案25】：我们可以在 div 元素上使用两种方法中的任何一种：
display: table;
或者，
display: inline-block;
我更喜欢使用display: table;，因为它自己处理所有多余的空格。而display: inline-block 需要一些额外的空间修复。
【讨论】：
【参考方案26】：简单
<div style="display: inline;">
<table>
</table>
</div>
【讨论】：
【参考方案27】：一个工作演示在这里-
.floating-box
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>【讨论】：
【参考方案28】：如果您有容器断线，经过数小时寻找好的 CSS 解决方案却一无所获，请改用I now use jQuery：
$('button').click(function()
$('nav ul').each(function()
$parent = $(this).parent();
$parent.width( $(this).width() );
);
);nav
display: inline-block;
text-align: left; /* doesn't do anything, unlike some might guess */
ul
display: inline;
/* needed style */
ul
padding: 0;
body
width: 420px;
/* just style */
body
background: #ddd;
margin: 1em auto;
button
display: block;
nav
background: #bbb;
margin: 1rem auto;
padding: 0.5rem;
li
display: inline-block;
width: 40px;
height: 20px;
border: solid thin #777;
margin: 4px;
background: #999;
text-align: center;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>fix</button>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
</ul>
</nav>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
<li>1</li>
<li>5</li>
<li>9</li>
<li>2</li>
<li>6</li>
<li>5</li>
<li>3</li>
<li>5</li>
</ul>
</nav>【讨论】：
这在 Chrome 中的 sn-p for me 中明显被破坏了；第二次单击修复按钮会产生与第一次单击不同的结果。 @MarkAmery 在我的 Mac 上我刚刚在 chrome、safari 和 firefox 上尝试过，一切都很好：没有可见的错误，控制台上没有任何内容，行为一致。也许是窗户的东西......【参考方案29】：就个人而言，我只是这样做：
HTML 代码：
<div>
<table>
</table>
</div>
CSS 代码：
div
display: inline;
如果您在 div 上应用浮动，它也可以工作，但显然，您需要在下一个 HTML 元素上应用“清除两个”CSS 规则。
【讨论】：
【参考方案30】：您只需使用display: inline;（或white-space: nowrap;）即可。
我希望你觉得这很有用。
【讨论】：
以上是关于如何使 div 不大于其内容？的主要内容，如果未能解决你的问题，请参考以下文章