如何使div不超过其内容？
我有一个布局类似于：
<div> <table> </table> </div> 我希望div只能扩展到和我的table一样宽。
解决方法是设置你的div display: inline-block 。
你想要一个块元素，它具有什么CSS调用缩小适合的宽度和规范不提供一个幸运的方式来获得这样的事情。 在CSS2中，缩小适合不是一个目标，而是指处理浏览器“不得不”无法获得宽度的情况。 这些情况是：
- 浮动
- 绝对定位的元素
- 内嵌块元素
- 表元素
当没有指定宽度时。 我听说他们想在CSS3中添加你想要的东西。 就目前而言，与上面的其中之一有关。
直接暴露该function的决定可能看起来很奇怪，但有一个很好的理由。 它是昂贵的。 缩小适合意味着格式化至less两次：在知道元素的宽度之前，不能开始格式化元素，并且无法计算穿过整个内容的宽度。 另外，人们不会像人们想象的那样经常需要缩小到适合的元素。 为什么你需要在桌子上额外的div？ 也许表格标题是你所需要的。
我想用
display: inline-block;
会工作，但是我不确定浏览器的兼容性。
另一个解决scheme是将你的div封装在另一个div （如果你想保持块的行为）：
HTML：
<div> <div class="yourdiv"> content </div> </div>
CSS：
.yourdiv { display: inline; }
display: inline-block为您的元素添加额外的余量。
我会推荐这个：
#element { display: table; /* IE8+ and all other modern browsers */ }
display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
Foo Hack – 跨浏览器支持内嵌块样式（2007-11-19） 。
对我有用的是：
display: table;
在div 。 （在Firefox和Google Chrome上testing）。
你可以尝试fit-content （CSS3）：
div { width: fit-content; /* To adjust the height as well */ height: fit-content; }
- 浏览器支持
- 规范
有两个更好的解决scheme
-
display: inline-block;要么
-
display: table;
出了这两个display:table; 更好。
用于display:inline-block; 您可以使用负边距方法来修复额外的空间
你的问题的答案在未来，我的朋友…
即“内在”即将与最新的CSS3更新
width: intrinsic;
不幸的是IE浏览器支持它，所以它不支持它
更多关于它的信息： CSS内部和外部调整模块级别3 ， 我可以使用？ ：内在和外在尺寸 。
现在你必须对<span>或<div>设置为满意
display: inline-block;
width:1px; white-space: nowrap;
为我工作正常:)
不知道在什么情况下，这将出现，但我相信CSS样式属性float left或right将有这种效果。 另一方面，它也会有其他副作用，例如允许文本在其周围浮动。
如果我错了，请纠正我，但我不是100％肯定的，目前无法自己testing。
CSS2兼容的解决scheme是使用：
.my-div { min-width: 100px; }
你也可以浮动你的div，这将迫使它尽可能小，但是如果你的div内的任何东西是浮动的，你将需要使用一个clearfix ：
.my-div { float: left; }
你可以简单地使用display: inline; （或者white-space: nowrap; ）。
我希望你觉得这个有用。
<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内联黑客，他们有点在divs中工作，但在其他人没有，所以，这是真的更容易附加扩展的div一张桌子… … …它可以有或没有内联属性，仍然是表格将是内容的总宽度。 =）
一个工作演示在这里 –
.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>
您可以使用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/
您可以在以下url查看一些有关此属性的testing： https ： //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
篡改Firebug我发现属性值-moz-fit-content正是做OP的想法，可以使用如下：
width: -moz-fit-content;
虽然它只适用于Firefox，但是我找不到其他浏览器（如Chrome）的任何对等设备。
我的CSS3 flexbox解决scheme有两种风格：顶层的像行程一样，底层的行为就像一个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的宽度与最大的元素宽度相同。
我已经解决了一个类似的问题（我不想使用display: inline-block因为item是居中的），在div标签中添加一个span标签，并将CSS格式从external div标签移动到新的inner标签span标签。 如果display: inline block只是将其作为另一种替代方法抛出display: inline block不适合您。
尝试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>
我试过div.classname{display:table-cell;}它工作！
我只想设置padding: -whateverYouWantpx;
div{ width:auto; height:auto; }
我们可以在div元素上使用这两种方法中的任何一种：
display: table;
要么，
display: inline-block;
我更喜欢使用display: table; ，因为它处理所有额外的空间。 虽然display: inline-block需要一些额外的空间修复。
修订（作品，如果你有多个孩子）：你可以使用jQuery（查看JSFiddle链接）
var d= $('div'); var w; d.children().each(function(){ w = w + $(this).outerWidth(); d.css('width', w + 'px') });
不要忘记包括jQuery …
在这里看到JSfiddle
如果你有容器断线，几个小时后寻找一个好的CSS解决scheme，并没有find， 我现在使用 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 style="display: inline;"> <table> </table> </div>
好的，在很多情况下，你甚至不需要做任何事情，因为默认情况下div的height和width都是auto，但是如果不是这样的话，应用inline-block显示器就可以为你工作…看看我创build的代码为你，这是你在做什么，你要找的：
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>
Personnaly，我只是这样做：
HTML代码：
<div> <table> </table> </div>
CSS代码：
div { display: inline; }
如果你在你的div上应用一个浮动，它也可以工作，但很明显，你需要在下一个HTML元素上应用“清除两个”CSS规则。
