如何使div不大于其内容？

我有一个类似的布局：

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

我希望div只扩展到与我的table一样宽。

1797844 次浏览
小开

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

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

小开

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

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

您也可以浮动您的div，这将强制它尽可能小，但如果您的div中的任何内容是浮动的，则需要使用clearFix：

.my-div{float: left;}
小开

你想要一个具有CSS所说的收缩到适合宽度的块元素，而规范并没有提供一种获得这种东西的幸运方法。在CSS2中，收缩到适合不是一个目标，而是指处理浏览器“必须”凭空获得宽度的情况。这些情况是：

  • 浮动
  • 绝对定位元件
  • 内联块元素
  • 表元素

当没有指定宽度时。我听说他们考虑在CSS3中添加您想要的内容。现在，使用上面的一个。

不直接公开该功能的决定可能看起来很奇怪，但有一个很好的理由。它是昂贵的。收缩到适合意味着至少格式化两次：在知道元素的宽度之前，你不能开始格式化元素，并且你不能计算整个内容的宽度w/o。此外，人们并不像人们想象的那样经常需要收缩到适合的元素。为什么你的表周围需要额外的div？也许表标题就是你所需要的。

小开

我认为使用

display: inline-block;

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

另一种解决方案是将您的div包装在另一个div中（如果您想维护块行为）：

超文本标记语言：

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

css：

.yourdiv{display: inline;}
小开 
display: -moz-inline-stack;display: inline-block;zoom: 1;*display: inline;

Foo Hack-跨浏览器支持内联块样式（2007-11-19）

小开

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

小开 
<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包含在表中……而且……它可以有或没有内联属性，而且表仍然是保存内容总宽度的表。

小开 
width:1px;white-space: nowrap;

对我来说很好：）

小开

对我有用的是：

display: table;

在div。（在Firefox和GoogleChrome上测试）。

小开

这似乎对我在所有浏览器上都很有效。示例是我在线和时事通讯中使用的实际广告。只需更改div的内容。它将根据您指定的填充量进行调整和收缩。

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px"><font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!</font></div>
小开

display: inline-block为您的元素添加额外的边距。

我会推荐这个：

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

奖金：你现在也可以通过添加margin: 0 auto轻松地将新#element居中。

小开

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

width: -moz-fit-content;

虽然它只适用于Firefox，但我找不到其他浏览器（如Chrome）的等效版本。

小开

我已经解决了一个类似的问题（我不想使用display: inline-block，因为项目是居中的），方法是在div标签内添加span标签，并将CSS格式从外部div标签移动到新的内部span标签。

小开

我尝试了div.classname{display:table-cell;}，它奏效了！

小开

您可以尝试#0（CSS3）： 

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

你问题的答案就在未来，我的朋友。

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

width: intrinsic;

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

更多关于它：CSS内在和外在尺寸模块级别3和我可以使用吗？：内在和外在尺寸。

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

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

小开

你可以简单地使用display: inline;（或white-space: nowrap;）。

我希望你觉得这很有用。

小开

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

超文本标记语言代码： 

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

CSS代码： 

div {display: inline;}

如果您在div上应用浮点数，它也可以工作，但显然，您需要在下一个超文本标记语言元素中应用“清除两者”CSS规则。

小开

如果你有容器断线，几个小时后寻找一个好的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>

小开

一个工作演示在这里-

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

小开

有两个更好的解决方案

  1. display: inline-block;

    或者

  2. display: table;

这两个#0更好，因为display: inline-block;增加了额外的边距。

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

小开

简单

<div style="display: inline;"><table></table></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.

小开

我们可以在#0元素上使用两种方法中的任何一种： 

display: table;

或，

display: inline-block;

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

小开

您可以使用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/中看到一些带有这个属性的测试

小开

我只是设置padding: -whateverYouWantpx;

小开 
div{width:auto;height:auto;}
小开 
<div class="parentDiv" style="display:inline-block">// HTML elements</div>

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

小开

OK，在许多情况下，你甚至不需要做任何事情，因为默认情况下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>

小开

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

小开

只需将样式放入您的CSS文件中

div {width: fit-content;}
小开

这在评论中已经提到，在其中一个答案中很难找到，所以：

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

div {display: inline-flex;}

这也是广泛支持跨浏览器。

小开

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

#parentElement {display: flex;flex-direction: column;align-items: flex-start;}
小开

如果我们定义一个全局变量并将其用于两者呢？

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

小开

我在div中有一个span，只是将margin: auto设置为容器div对我有用。

小开

您可以尝试此代码。按照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>

小开

您可以使用height: 100%和宽度进行选择。这使得div不大于其内容。

小开

尝试使用width: max-content属性根据div的内容大小调整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>
小开 

div{width:fit-content;}
<div><table></table></div>

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

只是设置的宽度和高度以适合内容.这是非常简单的。

div {
width: fit-content;height: fit-content;padding: 10px;
}

我正在添加填充：10px；。如果它被遗漏，div元素将完全坚持与表，它看起来有点笨拙。填充将在元素的边界和它的内容之间创建给定的空间。但这是你的愿望，不是强制性的。

小开

这似乎是一个13岁的问题。

.div{display:inline-block;}

或

.div{display:inline-flex;}

现在可以工作一天，没有任何兼容性问题。


提交答案