如何使div不大于其内容？-Java 学习之路

1752

我的布局类似于：

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

我想 div 只能扩展到我的 table 变宽 .

30 回答

4
使用Firebug篡改我发现了属性值 -moz-fit-content ，它完全符合OP的要求，可以按如下方式使用：
```
width: -moz-fit-content;
```
虽然它只适用于Firefox，但我找不到其他浏览器的任何等价物，例如Chrome .
回复于 2024-04-29T11:49:21+08:00
41
```
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
```
Foo Hack – Cross Browser Support for inline-block Styling (2007-11-19) .
回复于 2024-04-29T11:49:21+08:00
2099

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

希望这个对你有帮助 .

回复于 2024-04-29T11:49:21+08:00
32
修改（如果你有多个孩子的话有效）：你可以使用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
回复于 2024-04-29T11:49:21+08:00
206

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

回复于 2024-04-29T11:49:21+08:00
36
display: inline-block 为元素添加了额外的余量 .

我会推荐这个：
```
#element {
    display: table; /* IE8+ and all other modern browsers */
}
```
回复于 2024-04-29T11:49:21+08:00
7
```
div{
  width:auto;
  height:auto;
}
```
回复于 2024-04-29T11:49:21+08:00
64
我觉得用
```
display: inline-block;
```
会工作，但我不确定浏览器的兼容性 .

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

HTML：
```
<div>
    <div class="yourdiv">
        content
    </div>
</div>
```
CSS：
```
.yourdiv
{
    display: inline;
}
```
回复于 2024-04-29T11:49:21+08:00
19

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

回复于 2024-04-29T11:49:21+08:00
10
只需将样式放入CSS文件即可
```
div { 
    width: fit-content; 
}
```
回复于 2024-04-29T11:49:21+08:00
5

我只想设置 padding: -whateverYouWantpx;

回复于 2024-04-29T11:49:21+08:00
5
你可以试试fit-content（CSS3）：
```
div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
```
- Browser support
- Specification
回复于 2024-04-29T11:49:21+08:00
12
```
width:1px;
white-space: nowrap;
```
对我来说很好:)
回复于 2024-04-29T11:49:21+08:00
75
```
<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>
```
我知道人们有时候不喜欢 table ，但是我得告诉你，我尝试过css内联黑客，而且他们在某些div中工作但是在其他人中没有，所以，实际上只是更容易将扩展div放入其中一个表......并且......它可以具有或不具有内联属性，并且表仍然是将保持内容总宽度的表 . =）
回复于 2024-04-29T11:49:21+08:00
14

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

回复于 2024-04-29T11:49:21+08:00
12
有两个更好的解决方案
- display: inline-block;
要么
- display: table;
Out of these two display:table; is better.

对于 display:inline-block; ，您可以使用负边距方法来修复额外空间
回复于 2024-04-29T11:49:21+08:00
6
CSS2兼容的解决方案是使用：
```
.my-div
{
    min-width: 100px;
}
```
你也可以浮动你的div，这将迫使它尽可能小，但你需要使用clearfix如果你的div内的任何东西是浮动的：
```
.my-div
{
    float: left;
}
```
回复于 2024-04-29T11:49:21+08:00
15
你想要一个块元素，它具有CSS调用的缩小宽度，而规范并没有提供一种有福的方式来获得这样的东西 . 在CSS2中，缩小到适合不是目标，而是意味着处理浏览器“必须”凭空捏造宽度的情况 . 那些情况是：
- 浮动
- 绝对定位元素
- 内联块元素
- 表元素
没有指定宽度时 . 我听说他们想在CSS3中添加你想要的东西 . 现在，请使用上述之一 .

不直接公开该功能的决定可能看起来很奇怪，但有充分的理由 . 它是昂贵的 . 缩小到适合意味着格式化至少两次：在知道元素的宽度之前，不能开始格式化元素，并且无法计算整个内容的宽度 . 另外，人们可能不会像人们想象的那样经常使用缩小到合适的元素 . 为什么你的 table 周围需要额外的div？也许表格 Headers 就是您所需要的 .
回复于 2024-04-29T11:49:21+08:00
83
你的问题的答案在未来奠定了我的朋友......

即“内在”即将推出最新的CSS3更新
```
width: intrinsic;
```
不幸的是 IE 落后于它所以它还不支持它

更多关于它：CSS Intrinsic & Extrinsic Sizing Module Level 3和Can I Use?: Intrinsic & Extrinsic Sizing .

现在你必须满足 <span> 或 <div> 设置为
```
display: inline-block;
```
回复于 2024-04-29T11:49:21+08:00
4
您可以使用 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/
回复于 2024-04-29T11:49:21+08:00

我的CSS3 flexbox解决方案有两种形式：顶部的那个表现得像一个 Span ，底部的表现就像一个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.

回复于 2024-04-29T11:49:21+08:00

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

如果您出于任何原因使用 display: flex ，则可以使用：
```
div {
    display: inline-flex;
}
```
This is also widely supported across browsers.
回复于 2024-04-29T11:49:21+08:00
313
```
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>
```
这将使父div宽度与最大元素宽度相同 .
回复于 2024-04-29T11:49:21+08:00

OK, 在许多情况下你甚至不需要做任何事情，因为默认div有 height 和 width 为auto，但如果不是你的情况，应用 inline-block display会为你工作...看看我为你创建的代码和这是你想要的：

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>

回复于 2024-04-29T11:49:21+08:00

13
对我有用的是：
```
display: table;
```
在 div . （在 Firefox 和 Google Chrome 上测试过） .
回复于 2024-04-29T11:49:21+08:00
21

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

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

回复于 2024-04-29T11:49:21+08:00

182

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

回复于 2024-04-29T11:49:21+08:00

如果你有容器破线，下班后看一个好的CSS解决方案，找不到，I now use 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>

回复于 2024-04-29T11:49:21+08:00

这里有一个工作演示 -

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

回复于 2024-04-29T11:49:21+08:00

17
我们可以在 div 元素上使用以下两种方式中的任何一种：
```
display: table;
```
要么，
```
display: inline-block;
```
我更喜欢使用 display: table; ，因为它自己处理所有额外的空间 . 虽然 display: inline-block 需要一些额外的空间修复 .
回复于 2024-04-29T11:49:21+08:00

如何使div不大于其内容？

30 回答

相关问题