如何使div不大于其内容？

时间：2009-01-16 16:03:07

标签： html css width

我的布局类似于：

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

我希望div只能展开到table变宽的范围。

41 个答案:

答案 0 :(得分：2215)

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

答案 1 :(得分：321)

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

  • float
  • 绝对定位元素
  • 内联块元素
  • table element

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

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

答案 2 :(得分：213)

我认为使用

display: inline-block;

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

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

HTML：

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

CSS：

.yourdiv
{
    display: inline;
}

答案 3 :(得分：200)

display: inline-block为您的元素添加额外的余量。

我建议这样做：

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

加分：您现在也可以通过添加#element轻松地将这个花哨的新margin: 0 auto放在中心。

答案 4 :(得分：83)

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

Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19)

答案 5 :(得分：81)

对我有用的是：

display: table;
div中的

。 （经过 Firefox 和 Google Chrome 测试）。

答案 6 :(得分：71)

您可以尝试fit-content（CSS3）：

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

答案 7 :(得分：61)

有两种更好的解决方案

  1. type PrimeIter end function nextprime(y::BigInt) x = BigInt() ccall((:__gmpz_nextprime,:libgmp), Void, (Ptr{BigInt},Ptr{BigInt}), &x, &y) x end Base.start(::PrimeIter) = big(2) Base.next(::PrimeIter, state) = state, nextprime(state) Base.done(::PrimeIter, _) = false Base.iteratorsize(::PrimeIter) = Base.IsInfinite() > first(drop(PrimeIter(), 10^5)) 1299721

    或者

  2. display: inline-block;

    3. 其中两个display: table;更好，，因为display:table;会增加额外的保证金。

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

答案 8 :(得分：41)

你的问题的答案将来是我的朋友......

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

width: intrinsic;

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

有关它的更多信息：CSS Intrinsic & Extrinsic Sizing Module Level 3和Can I Use?: Intrinsic & Extrinsic Sizing。

现在，您必须对<span>或<div>设置为

感到满意 
display: inline-block;

答案 9 :(得分：37)

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

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

答案 10 :(得分：33)

width:1px;
white-space: nowrap;

适用于我：）

答案 11 :(得分：31)

CSS2兼容解决方案是使用：

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

你也可以浮动你的div，这将迫使它尽可能小，但如果div内的任何东西浮动，你需要使用clearfix：

.my-div
{
    float: left;
}

答案 12 :(得分：25)

好的，在很多情况下，您甚至不需要做任何事情，因为默认div有height和width为自动，但如果是＆＃39 ;不是你的情况，应用inline-block显示将为你工作...看看我为你创建的代码，它做你想要的：

＆＃13;
＆＃13; 
div {
  display: inline-block;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 13 :(得分：19)

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

我希望你觉得这很有用。

答案 14 :(得分：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/

中看到使用此属性的一些测试

答案 15 :(得分：18)

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

如果您出于某种原因使用display: flex，则可以使用：

div {
    display: inline-flex;
}

This is also widely supported across browsers.

答案 16 :(得分：17)

<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 inline hacks，他们有点在一些div中工作但是在其他人没有，所以，真的只是更容易将在表格中扩展div ...并且...它可以具有或不具有内联属性，并且表格仍然是将保持内容总宽度的表格。 =）

答案 17 :(得分：15)

只需将样式放入CSS文件

即可 
div { 
    width: fit-content; 
}

答案 18 :(得分：15)

这里有一个工作演示 -

＆＃13;
＆＃13; 
.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;  
}
＆＃13; 
<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;
＆＃13;
＆＃13;

答案 19 :(得分：13)

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

答案 20 :(得分：12)

尝试使用spring.security.oauth2.resourceserver.jwt.issuer-uri=https://cognito-idp.{REGION}.amazonaws.com/{POOL_ID} 属性通过div的内容大小来调整div的宽度。

尝试这个例子，

width: max-content

答案 21 :(得分：12)

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

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

答案 22 :(得分：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>

答案 23 :(得分：10)

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

width: -moz-fit-content;

虽然它仅适用于Firefox，但我找不到其他浏览器的任何等效内容，例如Chrome。

答案 24 :(得分：7)

我们可以在 div 元素中使用以下两种方式之一：

display: table;

，或者

display: inline-block;

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

答案 25 :(得分：7)

我已经通过在display: inline-block标记内添加span标记并移动了div标记，解决了类似的问题（我不想使用div因为项目居中）从外部span标记到新内部display: inline block标记的CSS格式。如果{{1}}对你来说不合适，那就把它当作另一种选择。

答案 26 :(得分：6)

div{
  width:auto;
  height:auto;
}

答案 27 :(得分：5)

如果您有容器破线，在数小时后寻找一个好的CSS解决方案并找不到，I now use jQuery代替：

＆＃13;
＆＃13; 
$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 28 :(得分：5)

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

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


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

不要忘记包含jQuery ......

See the JSfiddle here

答案 29 :(得分：4)

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

答案 30 :(得分：4)

您可以将display: flex用作父元素

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

答案 31 :(得分：4)

我只想设置padding: -whateverYouWantpx;

答案 32 :(得分：4)

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

答案 33 :(得分：1)

...
div{
width:fit-content;
}

答案 34 :(得分：0)

如果我们定义一个全局变量并将其用于两个变量该怎么办？

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

答案 35 :(得分：0)

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

答案 36 :(得分：0)

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

答案 37 :(得分：0)

简单地

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

答案 38 :(得分：0)

Personnaly，我只是这样做：

HTML code：

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

CSS代码：

div {
    display: inline;
}

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

答案 39 :(得分：-2)

在所有浏览器上，这对我来说似乎都很好。示例是我在线和简报中使用的实际广告。只需更改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>

答案 40 :(得分：-2)

您可以选择height: 100%和width。这使div不会大于其内容。

相关问题
最新问题