关于HTML：如何使DIV不大于其内容？


How to make div not larger than its contents?

我的布局类似于：

1
2
    <table>
    </table>

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

相关讨论

解决方案是将您的div设置为display: inline-block。

相关讨论

可以，但是我不确定浏览器的兼容性。

另一种解决方案是将您的div包装在另一个div中(如果您希望保持块行为)：

HTML：

1
        content

CSS：

1
2
3
4
.yourdiv
{
    display: inline;
}
相关讨论

display: inline-block为元素添加了额外的空白。

我建议这样做：

1
2
3
#element {
    display: table; /* IE8+ and all other modern browsers */
}

额外的好处：你现在也可以通过添加margin: 0 auto，轻松地将新的#element居中。

相关讨论

1
2
3
4
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

foo hack–对内联块样式的跨浏览器支持(2007-11-19)。

相关讨论

对我有用的是：

1
display: table;

在div中。(在火狐和谷歌浏览器上测试)。

相关讨论

您可以试用fit-content(css3)：

1
2
3
4
5
div {
  width: fit-content;
  /* To adjust the height as well */
  height: fit-content;
}
  • 浏览器支持
  • 规范
相关讨论

有两个更好的解决方案

  • display: inline-block;

    或

  • display: table;

    • 在这两个display:table;中，display: inline-block;增加了额外的利润，因此更好。

    对于display:inline-block;，可以使用负边缘法来固定额外的空间。

    相关讨论

    你的问题的答案将在未来，我的朋友…

    也就是说，最新的CSS3更新提供了"固有"功能。

    1
    width: intrinsic;

    不幸的是，IE落后了，所以还不支持它。

    关于它的更多信息：CSS内部和外部分级模块级别3，我可以使用吗？：内部和外部大小调整。

    现在你必须对或的设置感到满意。

    1
    display: inline-block;
    相关讨论

    不知道在什么上下文中会出现这种情况，但我相信CSS样式的属性float或者left或者right都会产生这种效果。另一方面，它也会有其他副作用，比如允许文本在它周围浮动。

    不过，如果我错了，请纠正我，我不能100%确定，目前不能自己测试。

    相关讨论

    1
    2
    width:1px;
    white-space: nowrap;

    对我来说很好：)

    相关讨论

    CSS2兼容的解决方案是使用：

    1
    2
    3
    4
    .my-div
    {
        min-width: 100px;
    }

    您也可以浮动您的DIV，这将使其尽可能小，但如果DIV中有任何内容是浮动的，则需要使用ClearFix：

    1
    2
    3
    4
    .my-div
    {
        float: left;
    }
    相关讨论

    好吧，在很多情况下，您甚至不需要做任何事情，因为默认情况下，DIV将height和width作为auto，但如果不是您的情况，应用inline-block显示将对您起作用…看看我为你创建的代码，它就是你想要的：

    1
    2
    3
    div {
      display: inline-block;
    }
    1
    2
    3
    4
    5
    6
    7
      <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>

    您只需使用display: inline;或white-space: nowrap;即可完成。

    希望你觉得这个有用。

    您可以使用inline-block作为@user473598，但要注意旧的浏览器。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* Your're working with */
    display: inline-block;

    /* For IE 7 */
    zoom: 1;
    *display: inline;

    /* For Mozilla Firefox < 3.0 */
    display:-moz-inline-stack;

    Mozilla根本不支持内联块，但是他们有-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中看到一些具有此属性的测试/

    相关讨论

    这一点已在评论中提到，很难在其中一个答案中找到，因此：

    如果您出于任何原因使用display: flex，您可以使用：

    1
    2
    3
    div {
        display: inline-flex;
    }

    这在浏览器中也得到了广泛的支持。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td>

       
            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 =)
       

    </td>
    </tr>
    </table>

    我知道人们有时不喜欢表格，但我得告诉你，我尝试过CSS内联黑客，他们有点在一些div中工作，但在其他div中没有，所以，把扩展的div放在表格中确实比较容易……而且……它可以有也可以没有inline属性，而且表格仍然是能够容纳内容总宽度的表格。=)

    相关讨论

    这里有一个工作演示-

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .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;  
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    The Way is using inline-block

    Supporting elements are also added in CSS.


       Floating box
       Floating box
       Floating box
       Floating box
       Floating box
       Floating box
       Floating box
       Floating box

    只需将样式放入CSS文件

    1
    2
    3
    div {
        width: fit-content;
    }
    相关讨论

    我的CSS3flexbox解决方案有两种风格：一种是顶部的行为像一个跨度，另一种是底部的行为像一个DIV，在包装器的帮助下获取所有宽度。它们的类分别是"top"、"bottom"和"bottomwrapper"。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    Is this

        <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>

    what you are looking for?

    Or may be...

       
            <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>
       

    this is what you are looking for.

    相关讨论

    试试display: inline-block;。要使其与跨浏览器兼容，请使用下面的CSS代码。

    1
    2
    3
    4
    5
    6
    7
    8
    div {
      display: inline-block;
      display:-moz-inline-stack;
      zoom:1;
      *display:inline;
      border-style: solid;
      border-color: #0000ff;
    }
    1
    2
    3
    4
    5
    6
    7
      <table>
        <tr>
          <td>Column1</td>
          <td>Column2</td>
          <td>Column3</td>
        </tr>
      </table>

    1
        // HTML elements

    这将使父DIV宽度与最大元素宽度相同。

    相关讨论

    在对Firebug的篡改中，我发现了属性值-moz-fit-content，它完全符合OP的要求，可以如下使用：

    1
    width: -moz-fit-content;

    虽然它只在火狐上运行，但我找不到任何与其他浏览器(如Chrome)相同的浏览器。

    相关讨论

    我通过在div标记内添加一个span标记，并将CSS格式从外部div标记移动到新的内部span标记，解决了类似的问题(我不想使用display: inline-block，因为该项是居中的)。如果display: inline block对你来说不是一个合适的答案，那么把它作为另一个备选方案扔出去。

    我们可以在div元素上使用以下两种方法之一：

    1
    display: table;

    或者，

    1
    display: inline-block;

    我更喜欢使用display: table;，因为它自己处理所有额外的空间。虽然display: inline-block需要一些额外的空间固定。

    1
    2
    3
    4
    div{
      width:auto;
      height:auto;
    }
    相关讨论

    修订(如果您有多个孩子，则适用)：您可以使用jquery(查看jfiddle链接)

    1
    2
    3
    4
    5
    6
    7
    8
    var d= $('div');
    var w;


    d.children().each(function(){
     w = w + $(this).outerWidth();
     d.css('width', w + 'px')
    });

    不要忘记包含jquery…

    看这里的小提琴

    相关讨论

    如果有容器破坏了行，在数小时后寻找一个好的CSS解决方案，却找不到，我现在使用jquery代替：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $('button').click(function(){

      $('nav ul').each(function(){
       
        $parent = $(this).parent();
       
        $parent.width( $(this).width() );
       
      });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    <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>

    相关讨论

    我试了一下div.classname{display:table-cell;}，结果成功了！

    我只会设置padding: -whateverYouWantpx;。

    相关讨论

    您可以使用display: flex作为父元素

    1
    2
    3
    4
    5
    #parentElement {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
     }

    如果我们定义一个全局变量并将其用于这两个变量该怎么办？

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    :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
    }
    1
    2
    3
    4
    5
        <table class="inner-table">
           <tr>
               <td>abc</td>
           </tr>
        </table>

    简单地

    1
    2
        <table>
        </table>

    个人而言，我只是这样做：

    HTML代码：

    1
    2
        <table>
        </table>

    CSS代码：

    1
    2
    3
    div {
        display: inline;
    }

    如果您在DIV上应用了一个float，它也可以工作，但是显然，您需要在下一个HTML元素上应用一个"清除两个"的CSS规则。

    在所有浏览器上，这似乎对我都适用。这个例子是我在网上和时事通讯中使用的一个实际广告。只需更改DIV的内容。它将根据指定的填充量调整和收缩包装。

    1
    2
        <font color=red size=4>Need to fix a birth certificate? Learn Photoshop in a Day!
        </font>
    相关讨论