如何使 div 不大于其内容？答案

【问题标题】：How can I make a div not larger than its contents?如何使 div 不大于其内容？
【发布时间】：2010-10-01 20:13:33
【问题描述】：

我的布局类似于：

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

我希望 div 仅扩展到我的 table 的宽度。

【问题讨论】：

这种效果被称为“收缩包装”，正如回答的那样，有几种方法可以做到这一点（浮动、内联、最小/最大宽度），所有这些都有副作用可供选择跨度>
以下答案都对我有用，除了：display: table -OR- height: fit-content !!!

标签： html css width

【解决方案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;）即可。

我希望你觉得这很有用。

【讨论】：