【问题标题】: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】:

          有两个更好的解决方案

          1. display: inline-block;

          2. 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 将 heightwidth 设为自动,但如果不是您的情况,请应用 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 您可以使用spandivul 或其他任何东西,重要的部分是您希望最小宽度的容器具有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;)即可。

                                    我希望你觉得这很有用。

                                    【讨论】:

                                      猜你喜欢
                                      • 1970-01-01
                                      • 2021-01-06
                                      • 2020-01-09
                                      • 2016-03-09
                                      • 1970-01-01
                                      • 2017-02-17
                                      相关资源
                                      最近更新 更多