如何使div不大于其内容?


2069

我的布局类似于:

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

我希望div扩展到我所能达到的最大范围table


90
效果被称为“收缩包装”,据回答,有几种方法可以做到这一点(浮动,内联,最小/最大宽度),所有这些都有副作用可供选择
annakata

Answers:


2425

解决方案是将设置divdisplay: inline-block


239
@ leif81您可以使用a span或a divul其他任何东西,重要的部分是您想要最小宽度的容器具有CSS属性display: inline-block
miahelf

10
如果有人想知道:然后可以通过在表的父项上设置“ text-align:center”并在其上设置“ text-align:left”(例如<body style =“ text-align:center”> < span style =“ text-align:left; display:inline-block;”> <table> ... </ table> </ span> </ body>)
bernstein 2012年

12
对于使用span的我来说,它不适用于chrome,但可以使用空白:nowrap;
albanx 2012年

57
请注意,一旦display: inline-block设置好属性,margin: 0 auto;将无法按预期工作。在这种情况下,如果父容器具有text-align: center;inline-block元素,则该元素将水平居中。
Savas Vedova 2014年

12
inline-block不适用于我,但inline-flexDID。
mareoraft

331

您需要一个具有CSS所谓的“缩小至适合宽度”的块元素,而规范并未提供一种获得这种效果的简便方法。在CSS2中,缩小以适应不是目标,而是意味着处理浏览器“必须”凭空获得宽度的情况。这些情况是:

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

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

不直接公开功能的决定似乎很奇怪,但是有充分的理由。它是昂贵的。缩小到适合表示至少要格式化两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算没有通过整个内容的宽度。另外,人们并不需要像人们想像中那样频繁地使用“缩小以适合”元素。为什么您的桌子周围需要额外的div?也许表格标题就是您所需要的。


34
我想说inline-block的正是为此而设计的,可以完美地解决问题。
miahelf

6
我认为他们正在添加css4,它将是content-box, max-content, min-content, available, fit-content, auto
Muhammad Umer

4
使用new fit-content关键字(首次写此答案时不存在,并且仍未完全支持)使您可以将“缩小以适合”大小应用于元素,从而消除了此处建议的任何技巧。幸运的是仅以支持为目标的浏览器。但是+1;这些仍然有用!
Mark Amery

float做了我需要做的事!
nipunasudha '18

227

我认为使用

display: inline-block;

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


另一个解决方案是将您的包裹div在另一个div(如果您想保持块的行为):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

23
回答浏览器兼容性问题:DIV元素上的IE7 / 8不起作用。您必须使用SPAN元素。
马特·布洛克

@feeela-我总是在变焦前面加上*,例如*display: inline; *zoom: 1;。我没有针对这种特殊情况进行测试,但过去我一直发现hasLayout hack仅对于IE7或IE7模式下的IE8(或怪异的IE8!)才需要。
robocat

@robocat是的,它确实是有一种变通方法inline-block在IE 7中启用
feeela

@feela-您的评论对我没有意义!我建议也将*放在缩放前面,即* zoom:1;
robocat 2012年

4
请解释为什么您的inline-block解决方案有效。
HelloWorldNoMore

219

display: inline-block 为您的元素增加了余量。

我建议这样做:

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

奖励:现在,您#element只需添加,就可以轻松地将新奇的样式居中margin: 0 auto


14
+1-这是现代浏览器的最佳,最简洁的解决方案,它也可以使元素居中。position: absolute对于<IE8,必须带有条件注释。
uınbɐɥs

21
指定display: inline-block不会增加任何边距。但是CSS处理在内联元素之间显示的空格。
Feeela 2012年

请说明为什么您的display:table解决方案有效。
HelloWorldNoMore

2
内联块使该元素无法在其父元素中定位(例如,如果存在text-align:center,则无法将其粘贴到左侧)display:table是完美的:)
FlorianB

1
如果您有的话,这是要走的路position: absolute
m4heshd '18


86

对我有用的是:

display: table;

div。(在FirefoxGoogle Chrome上测试)。


4
是的,尤其是如果您需要以空白为中心:自动。内联阻止的情况不是解决方案。
Zsolt Szatmari 2014年

1
另请注意,如果要在此元素内进行填充,则必须设置border-collapse: separate;样式。它是许多浏览器的默认设置,但通常是css框架(如引导程序)将其重置为collapse
Ruslan Stelmachenko

在2009年制造的Windows Mobile 6.5手机上的MSIE 6上进行了测试:它可以正常降级为全角div(这不太可能在手机上出现问题)。如果任何人在台式机上使用的Internet Explorer版本低于8,则说明他们使用的是不受支持的操作系统(XP附带了IE6,Vista附带了IE7);我将他们重定向到一个页面,告诉他们如果要继续在该计算机上安全使用Internet,请升级到GNU / Linux。
西拉斯·布朗

85

有两个更好的解决方案

  1. display: inline-block;

    要么

  2. display: table;

这两个中的display:table;一个更好,因为display: inline-block;增加了额外的余量。

因为display:inline-block;您可以使用负边距方法来修复多余的空间


2
您介意解释为什么display:table更好吗?
纳撒尼尔·福特

1
对于display:inline-block,您必须使用负边距方法来固定额外的间距。
Shuvo Habib

8
@NathanielFord display:table将元素保留在“块”格式化上下文中,因此您可以照常使用边距等控制其位置。display:-inline-*另一方面,将元素放入Inline格式设置上下文中,导致浏览器围绕该元素创建匿名块包装器,其中包含带有继承的font / line-height设置的行框,然后将块插入该行框中(对齐(默认情况下,默认为垂直)。这涉及更多的“魔术”,因此有潜在的惊喜。
Ilya Streltsyn


43

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

如果我错了,请指正我,我不确定100%,目前无法自己测试。


1
是的,在CSS 2.1中。(CSS2.0将使float变为全角,但实际上只有IE5 / Mac才这样做)。表格和浮点数是唯一可以缩小以适合其内容的显示类型。
bobince

41

您的问题的答案在于未来我的朋友...

即“ intrinsic”随CSS3最新更新一起发布

width: intrinsic;

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

有关它的更多信息:CSS本质和外部大小调整模块级别3可以使用吗?:内部和外部调整大小

现在,您必须满意<span><div>设置为

display: inline-block;

12
intrinsic因为值是非标准的。其实是width: max-content。请参阅该MDN页面或已链接的草稿。
maryisdead,2015年

34

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

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

您还可以将div浮动,这将迫使其尽可能小,但如果div中的任何内容浮动,则需要使用clearfix

.my-div
{
    float: left;
}

3
这应该。您使用的是哪种文档类型?
苏联2009年


26

好的,在许多情况下,您甚至不需要执行默认情况下div具有的功能heightwidthauto的功能,但是如果不是您的情况,则应用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>



19

您只需使用display: inline;(或white-space: nowrap;)就可以做到这一点。

希望这个对你有帮助。


18

您可以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/

您可以在以下网址看到一些具有此属性的测试:https : //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/


1
你在说什么?Mozilla Firefox inline-block从3.0(2008)开始支持。来源:developer.mozilla.org/en-US/docs/Web/CSS/...
夏吉查兹


18
<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属性,但该表仍将保留内容的总宽度。=)


2
这不是“正确”的方法,但是当事情变得有些复杂时,IE6 / 7/8常常不能很好地发挥作用,因此我完全理解为什么您会这样做。你得到了我的投票。
Craigo 2012年

我会这样做,但是我必须包围每个输入框,因此有很多额外的html。
NickSoft'9

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>


13

我的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无需前缀即可使用
Horacio

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

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


有没有办法我只能将其应用于垂直尺寸以最小化并保持水平较大?
Gobliins

12

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


11

篡改Firebug,我发现属性值-moz-fit-content恰好满足了OP的要求,可以如下使用:

width: -moz-fit-content;

尽管它只能在Firefox上运行,但找不到其他浏览器(例如Chrome)的等效项。


截至2017年1月,IE(包括Edge和Mobile的所有版本)和Opera Mini不支持fit-content。Firefox仅支持宽度。其他浏览器都很好地支持它。
加文

11

您可以尝试此代码。请遵循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>


7

我已经解决了一个类似的问题(display: inline-block由于该项目居中,所以我不想使用该问题),方法是在span标签内添加一个div标签,然后将CSS格式从外部div标签移动到新的内部span标签。如果display: inline block这不是您的合适答案,请将其扔掉作为另一个替代想法。


7

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

display: table;

要么,

display: inline-block; 

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


6
div{
  width:auto;
  height:auto;
}

如果div包含行内(或行内块)元素,并且它们的字体大小和行高与div本身不同,则此方法将无效。
quotesBro

5

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


在Chrome浏览器的代码段中,这显然已被打破;第二次单击修复按钮会产生与第一次单击不同的结果。
Mark Amery

在我的Mac上,@ MarkAmery我只是在chrome,safari和firefox上尝试过,一切都很好:没有可见的错误,控制台上没有任何内容,行为一致。也许是带有窗户的东西……
cregox

5

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

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


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

不要忘记包括jQuery ...

在这里查看JSfiddle


如果您的div有多个子代,则此方法无效;它只是将div宽度设置为第一个孩子的div宽度。
Mark Amery

@MarkAmery首先,在您投反对票之前,请仔细阅读问题,他们要一个孩子。如果您真的很好奇如何与多个孩子一起完成,请参阅修订后的答案。
邦德史密斯2016年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.