如何使div不大于其内容？

HTML

2020-03-13

我的布局类似于：

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

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

第1423篇《如何使div不大于其内容？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共27个回答

猪猪L 2020.03.13

I tried div.classname{display:table-cell;} and it worked!

凯LEY 2020.03.13

You can try this code. Follow the code in the CSS section.

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>

阿飞飞云 2020.03.13

div{
  width:auto;
  height:auto;
}

MandyTony 2020.03.13

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

display: table;

要么，

display: inline-block;

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

Mandy古一 2020.03.13

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

width: -moz-fit-content;

尽管它只能在Firefox上运行，但是找不到其他浏览器（例如Chrome）的等效项。

西门逆天 2020.03.13

我display: inline-block通过在span标签内添加div标签，并将CSS格式从外部div标签移至新的内部span标签，解决了类似的问题（由于项目居中，因此我不想使用该标签）。如果display: inline block这不是您的合适答案，请将其扔掉作为另一个替代想法。

Stafan小宇宙 2020.03.13

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

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

乐泡芙A 2020.03.13

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

Near神奇 2020.03.13

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

null 2020.03.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;  
}

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

录泰红木 2020.03.13

您可以简单地通过使用display: inline;（或white-space: nowrap;）来做到这一点。

希望这个对你有帮助。

超威蓝喵 2020.03.13

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

Harry逆天 2020.03.13

只需将样式放入CSS文件

div { 
    width: fit-content; 
}

JinJin米亚 2020.03.13

这已在评论中提及，很难在答案之一中找到，因此：

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

div {
    display: inline-flex;
}

跨浏览器也广泛支持此功能。

LEYJim 2020.03.13

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

理查德Stafan 2020.03.13

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

如果我错了，请指正我，我不确定100％，并且目前无法自己测试。

米亚神无 2020.03.13

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

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

width: intrinsic;

不幸的是IE落后了，因此尚不支持

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

display: inline-block;

逆天理查德 2020.03.13

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

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

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

.my-div
{
    float: left;
}

YOC69983874 2020.03.13

width:1px;
white-space: nowrap;

对我来说很好:)

小小TomNear 2020.03.13

有两个更好的解决方案

display: inline-block;

要么
display: table;

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

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

YOC71588217 2020.03.13

对我有用的是：

display: table;

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

L西里 2020.03.13

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

我建议这样做：

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

奖励：现在，您#element只需添加，就可以轻松地将新奇的居中显示margin: 0 auto。

Pro番长 2020.03.13

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

Foo Hack –对嵌入式块样式的跨浏览器支持（2007-11-19）。

小卤蛋卡卡西A 2020.03.13

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

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

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

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

GO老丝LEY 2020.03.13

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

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

enta 2020.03.13

我认为使用

display: inline-block;

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

Another solution would be to wrap your div in another div (if you want to maintain the block behavior):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

entaseven 2020.03.13

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android