html - 如何使 div 不大于其内容？

Question

我的布局类似于：

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

我希望div只扩展到我的范围table。

score 2685 · Accepted Answer

2685

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

于 2010-10-12T16:47:57.150 回答

score 356 · Accepted Answer

你想要一个块元素，它具有 CSS 所称的收缩以适应宽度，而规范没有提供获得这种东西的幸运方式。在 CSS2 中，缩小以适应不是目标，而是意味着处理浏览器“必须”凭空获得宽度的情况。这些情况是：

漂浮
绝对定位元素
内联块元素
表格元素

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

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

score 249 · Accepted Answer

我认为使用

display: inline-block;

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

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

HTML：

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

CSS：

.yourdiv
{
    display: inline;
}

score 246 · Accepted Answer

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

我会推荐这个：

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

奖励：您现在还可以#element通过添加margin: 0 auto.

score 164 · Accepted Answer

你可以试试fit-content（CSS3）：

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

score 104 · Accepted Answer

有两个更好的解决方案

display: inline-block;

或者
display: table;

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

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

score 90 · Accepted Answer

90

对我有用的是：

display: table;

在div. （在Firefox和Google Chrome上测试）。

于 2012-01-11T12:01:10.487 回答

score 85 · Accepted Answer

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

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

score 48 · Accepted Answer

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

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

score 44 · Accepted Answer

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

即“内在”是最新的 CSS3 更新

width: intrinsic;

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

有关它的更多信息：CSS 内部和外部大小调整模块第 3 级，我可以使用吗？：内在和外在尺寸。

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

display: inline-block;

score 39 · Accepted Answer

39

width:1px;
white-space: nowrap;

对我来说很好:)

于 2011-08-26T08:14:09.403 回答

score 37 · Accepted Answer

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

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

您还可以浮动您的 div，这将迫使它尽可能小，但如果您的 div 内的任何内容浮动，您将需要使用clearfix ：

.my-div
{
    float: left;
}

score 30 · Accepted Answer

好的，在许多情况下，您甚至不需要像默认的 divheight和widthauto 那样做任何事情，但如果不是您的情况，应用inline-blockdisplay 会为您工作...看看我为您创建的代码就可以了你在找什么：

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>

score 28 · Accepted Answer

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

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

div {
    display: inline-flex;
}

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

score 24 · Accepted Answer

你可以试试这段代码。按照 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>

score 23 · Accepted Answer

23

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

div { 
    width: fit-content; 
}

于 2018-04-21T16:11:32.750 回答

score 21 · Accepted Answer

尝试使用width: max-content属性通过它的内容大小调整 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>

score 20 · Accepted Answer

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

I know people don't like tables sometimes, but I gotta tell you, I tried the css inline hacks, and they kinda worked in some divs but in others didn't, so, it was really just easier to enclose the expanding div in a table...and...it can have or not the inline property and still the table is the one that's gonna hold the total width of the content. =)

score 20 · Accepted Answer

您可以简单地使用display: inline;(或white-space: nowrap;) 来完成。

希望这个对你有帮助。

score 20 · Accepted Answer

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

score 15 · Accepted Answer

一个工作演示在这里-

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

score 12 · Accepted Answer

我的 CSS3 flexbox 解决方案有两种风格：顶部的一个表现得像一个跨度，底部的一个表现得像一个 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.

score 11 · Accepted Answer

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

width: -moz-fit-content;

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

score 11 · Accepted Answer

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

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

score 11 · Accepted Answer

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

score 9 · Accepted Answer

9

div{
width:fit-content;
}

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

于 2020-11-24T23:12:22.843 回答

score 9 · Accepted Answer

只需将宽度和高度设置为适合内容。这很简单。

div {

    width: fit-content;
    height: fit-content;
    padding: 10px;

}

我正在添加填充：10px；. 如果省略，div 元素将完全贴在表格上，看起来有点笨拙。填充将在元素的边框和它的内容之间创建给定的空间。但这是你的愿望，不是强制性的。

score 9 · Accepted Answer

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

score 7 · Accepted Answer

我通过在标签内添加标签并将 CSS 格式从外部标签移动到新的内部标签来解决了类似的问题（我不想使用display: inline-block，因为项目居中）。如果不适合您，则将其作为另一个替代想法扔掉。spandivdivspandisplay: inline block

score 7 · Accepted Answer

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

display: table;

或者，

display: inline-block;

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

score 6 · Accepted Answer

6

div{
  width:auto;
  height:auto;
}

于 2016-12-06T19:36:51.180 回答

score 5 · Accepted Answer

修订（如果您有多个孩子则有效）：您可以使用 jQuery（查看 JSFiddle 链接）

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


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

不要忘记包含 jQuery...

在这里查看 JSfiddle

score 5 · Accepted Answer

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

score 4 · Accepted Answer

4

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

于 2013-03-07T17:37:59.793 回答

score 4 · Accepted Answer

您可以display: flex用于父元素

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

score 3 · Accepted Answer

3

我会设置padding: -whateverYouWantpx;

于 2016-10-21T17:22:09.353 回答

score 3 · Accepted Answer

3

我有一个span内部的div，只是设置margin: auto到容器div为我工作。

于 2019-06-04T07:35:52.127 回答

score 1 · Accepted Answer

Personnaly，我只是这样做：

HTML 代码：

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

CSS 代码：

div {
    display: inline;
}

如果你在你的 div 上应用一个浮点数，它也可以工作，但很明显，你需要在下一个 HTML 元素上应用一个“清除两个”CSS 规则。

score 1 · Accepted Answer

1

简单地

<div style="display: inline;">
    <table>
    </table>
</div>

于 2016-06-23T19:20:12.963 回答

score 1 · Accepted Answer

如果我们定义一个全局变量并将其用于两者会怎样。

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

score -3 · Accepted Answer

这似乎对我在所有浏览器上都有效。示例是我在网上和时事通讯中使用的实际广告。只需更改 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>

score -4 · Accepted Answer

-4

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

于 2019-09-14T16:02:34.417 回答

html - 如何使 div 不大于其内容？

42 回答 42

Related

Reference