提问



我的布局类似于:


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


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

最佳参考


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

其它参考1


你想要一个块元素,它具有CSS调用的缩小宽度,而规范并没有提供一种有福的方式来获得这样的东西。在CSS2中,缩小到适合不是目标,而是意味着处理浏览器必须凭空捏造宽度的情况。那些情况是:



  • float

  • 绝对定位的元素

  • 内联块元素

  • table element



没有指定宽度时。我听说他们想在CSS3中添加你想要的东西。现在,请使用上述之一。


不直接公开该功能的决定可能看起来很奇怪,但有充分的理由。它是昂贵的。缩小到适合意味着格式化至少两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算整个内容的宽度。另外,人们可能不会像人们想象的那样经常使用缩小到合适的元素。为什么你的桌子周围需要额外的div?也许表格标题就是您所需要的。

其它参考2


我觉得用


display: inline-block;


会工作,但我不确定浏览器的兼容性。





另一个解决方案是将div包装在另一个div中(如果你想保持块行为):


HTML:


<div>
    <div class="yourdiv">
        content
    </div>
</div>


CSS:


.yourdiv
{
    display: inline;
}

其它参考3


display: inline-block为你的元素增加了额外的余量。


我会推荐这个:


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

其它参考4


display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;


Foo Hack - 跨浏览器支持内联块样式(2007-11-19)。[73]

其它参考5


对我有用的是:


display: table;


div中。 (经过 Firefox Google Chrome 测试)。

其它参考6


你可以试试fit-content(CSS3):[74]


div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}



  • 浏览器支持

  • 规范


其它参考7


有两个更好的解决方案[75] [76]



  1. display: inline-block;


    要么

  2. display: table;



这两个display:table;中更好。


对于display:inline-block;,您可以使用负边距方法来修复额外空间

其它参考8


你的问题的答案在未来奠定了我的朋友......


即内在即将推出最新的CSS3更新


width: intrinsic;


不幸的是, IE 落后于它,所以它还没有支持它


更多关于它:CSS Intrinsic&外部尺寸模块3级和我可以使用吗?:内在和&外在尺寸。 [77] [78]


现在你必须满足<span><div>设置为


display: inline-block;

其它参考9


不知道这将出现在什么上下文中,但我相信CSS样式属性float leftright将产生这种效果。另一方面,它也会产生其他副作用,例如允许文本在其周围浮动。


如果我错了,请纠正我,我不是百分百肯定,目前无法自己测试。

其它参考10


width:1px;
white-space: nowrap;


对我来说很好:)

其它参考11


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


.my-div
{
    min-width: 100px;
}


你也可以浮动你的div,这将迫使它尽可能小,但如果你的div内的任何东西浮动,你将需要使用一个clearfix:[79]


.my-div
{
    float: left;
}

其它参考12


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


希望这个对你有帮助。

其它参考13


好的,在很多情况下你甚至不需要做任何事情,因为默认div有heightwidth为auto,但如果不是你的情况,那就申请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>



<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放入一个表......和......它可以有或没有内联属性,而且表仍然是将保持内容的总宽度。=)

其它参考14


您可以使用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根本不支持内联块,但它们-moz-inline-stack大致相同


围绕inline-block显示属性的一些跨浏览器:
https://css-tricks.com/snippets/css/cross-browser-inline-block/[80]


您可以在以下网址中查看使用此属性的一些测试:https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/[81]]]

其它参考15


这里有一个工作演示 -




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



我的CSS3 flexbox解决方案有两种形式:顶部的一个表现得像一个跨度,底部的表现就像一个div,在包装器的帮助下占据所有宽度。他们的课程分别是顶部,底部和底部包装。




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.



<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>


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

其它参考16


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



使用Firebug篡改我发现了属性值-moz-fit-content,它完全符合OP的要求,可以按如下方式使用:


width: -moz-fit-content;


虽然它只适用于Firefox,但我无法找到其他浏览器,如Chrome。

其它参考17


我已经解决了一个类似的问题(我不想使用display: inline-block因为项目居中),在div标签内添加span标签,并从中移动CSS格式外部div标签到新的内部span标签。如果display: inline block不是适合您的答案,只需将其作为另一种选择。

其它参考18


div{
  width:auto;
  height:auto;
}

其它参考19


如果你有容器破线,在几小时后寻找一个好的CSS解决方案并找不到,我现在使用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>



我们可以在 div 元素中使用以下两种方式中的任何一种:


display: table;


要么,


display: inline-block; 


我更喜欢使用display: table;,因为它可以处理所有额外的空间。虽然display: inline-block需要一些额外的空间修复。

其它参考20


修订(如果您有多个子,则有效):
你可以使用jQuery(看看JSFiddle链接)


var d= $('div');
var w;


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


别忘了包含jQuery ......


在这里看到JSfiddle [83]

其它参考21


只需将样式放入css文件即可



  div {width:fit-content; }


其它参考22


我试过div.classname{display:table-cell;}并且它有效!

其它参考23


我只想设置padding: -whateverYouWantpx;

其它参考24


这已在评论中提及,很难在其中一个答案中找到:


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



  display:inline-flex



这也得到了浏览器的广泛支持。[84]