2504

我的布局类似于：

<div><表格></表格></div>

我想买div公司只扩展到我的桌子变为。

改进这个问题
三
  • 109
    这种效果称为“收缩包装”，正如所回答的那样，有两种方法可以做到这一点（浮点、内联、最小/最大宽度），所有这些方法都有副作用可供选择
    – 安娜卡塔
    评论 2009年1月16日16:32
  • 对我来说并不奏效，但我没有发现问题的答案有任何错误。
    – 大卫·斯佩克特
    评论 2023年6月24日17:01
  • 现实中不可能。语言、字体、不同宽度的Unicode字符、pixelDeviceRatio、浏览器版本等（……），CSS浪费了时间，因为它不够聪明，无法处理所有这些。
    – NVRM公司
    评论 2023年10月19日19:02

44个答案44

重置为默认值
1
2
2826

解决方案是将div公司到显示：内联块.

改进此答案
6
  • 247
    @leif81您可以使用跨度或adiv公司或ul公司或者其他任何东西，重要的部分是对于希望最小宽度的容器来说，具有CSS属性显示：内联块
    – 米歇尔夫
    评论 2011年11月17日8:23
  • 66
    请注意，一旦显示：内联块属性设置边距：0自动；无法按预期工作。在这种情况下，如果父容器文本对齐：居中；然后内联块元素将水平居中。
    – 萨瓦斯·维多瓦
    评论 2014年4月9日12:09
  • 添加到@SavasVedova评论，记住更改汽车在里面边距：0自动；到0（或您可以选择的任何值）。
    – 卡洛斯温85
    评论 2021年10月13日22:53
  • 三
    如果我们希望元素具有另一个显示属性，例如网格，那么这不是一个解决方案。@维塔利·费多连科的解决方案使用更新的适合的属性，适用于任何显示属性，不添加边距，并且所有浏览器都支持.
    – 可可百合
    评论 2023年1月8日18:07
  • 2
    如果我希望我的组件能够内联XD，这将是一件很棒的事情。适合的似乎是现代的解决方案。
    – 零利率
    评论 2023年1月13日0:16
368

您需要一个块元素，它具有CSS所称的收缩适应宽度，而规范并没有提供一种得到这种东西的好方法。在CSS2中，缩小尺寸不是目标，而是指处理浏览器“必须”从稀薄的空气中获得宽度的情况。这些情况包括：

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

没有指定宽度时。我听说他们想在CSS3中添加您想要的内容。现在，用上面的一个来凑合一下。

不直接公开该功能的决定可能看起来很奇怪，但有一个很好的理由。它很贵。缩小尺寸意味着至少要格式化两次：在知道元素的宽度之前，不能开始格式化元素，也不能在整个内容中计算宽度。此外，不需要像人们想象的那样经常使用收缩配合元件。为什么你的桌子周围需要额外的沙发？也许你只需要表格标题。

改进此答案
三
  • 40
    我会说内联块正是为了这个目的，并且完美地解决了这个问题。
    – 米歇尔夫
    评论 2011年11月17日8:24
  • @miahelf–著名的最后一句话，在任何时候都不是内联的，这是完美的方式，永远不会被认为是这样的。
    – hpdev设备
    评论 2021年11月30日9:57
  • 请注意位置：绝对是唯一的一个所有方法（包括宽度：fit-content)文本换行时有效在元素内部的某个地方！
    – EvgenKo423公司
    评论 4月26日15:35
266

我认为使用

显示：嵌入式块；

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

另一个解决方案是将您的div公司在另一个div公司（如果要保持块行为）：

HTML格式：

<div><div class=“yourdiv”>内容</div></div>

CSS（客服代表）：

.yourdiv（你的名字）{显示：内联；}
改进此答案
2
  • 23
    要回答浏览器兼容性问题：这不适用于DIV元素上的IE7/8。您必须使用SPAN元素。
    – 马特·布鲁克
    评论 2011年2月18日14:26
  • 链接位于caniuse.com/？搜索=内联块说99%的浏览器支持非固定版本，这是自2008年以来（当您切换日期相关浏览器时）的浏览器。（这超过了ES5的支持！）
    – 英菲冈
    评论 2023年2月3日21:00
259

你可以试试适合的（CSS3）：

分区{宽度：适合；/*还要调整高度*/身高：适中；}
改进此答案
5
  • 41
    这太有道理了，当然它缺乏支持。
    – 萨瓦B。
    评论 2018年3月6日17:33
  • 这与边距：自动就是我所带的。
    – jnnnn公司
    评论 2022年2月10日0:00
  • 11
    这应该是公认的答案
    – 约瑟920405
    评论 2022年4月13日3:41
  • 很 完美。它永远不会得到广泛使用。
    – 大卫·斯佩克特
    评论 2023年6月24日17:21
  • 为了给每个人都保存一个犬类查找：它现在得到了广泛支持。很抱歉打断了上面的笑话，我很欣赏“这很有道理->它永远不会被支持”的幽默：）
    – 吕克
    评论 2023年12月1日18:23
251

显示：内联块为元素添加额外的边距。

我建议这样做：

#元素{显示：表格；/*IE8+和所有其他现代浏览器*/}

奖金：你现在也可以很容易地将这个新奇的#元素只需添加边距：0自动.

改进此答案
0
106

有两种更好的解决方案

  1. 显示：嵌入式块；

    或

  2. 显示：表格；

这两个人中显示：表格；更好，因为显示：嵌入式块；添加额外的边距。

对于显示：嵌入式块；您可以使用负边距方法来修复多余的空间

改进此答案
0
91

对我有用的是：

显示：表格；

在中div公司.（测试日期：Firefox浏览器和谷歌浏览器).

改进此答案
0
85
显示：-moz内联堆栈；显示：嵌入式块；缩放：1；*显示：内联；

Foo Hack–跨浏览器支持内联块样式（2007-11-19）.

改进此答案
0
49

不知道这将在什么上下文中出现，但我相信CSS样式属性浮动任何一个左边或正确的将产生这种效果。另一方面，它也有其他副作用，比如允许文本在其周围浮动。

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

改进此答案
0
45

你的问题的答案在于未来，我的朋友。。。

也就是说，“内在”是随着最新的CSS3更新而来的

宽度：固有；

不幸地工业工程落后于它，所以它还不支持它

更多信息：CSS内部和外部尺寸模块3级和我能用吗？：内部和外部尺寸.

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

显示：嵌入式块；
改进此答案
1
40

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

.my-div文件{最小宽度：100px；}

您还可以浮动div，这将迫使它尽可能小，但您需要使用清除浮动如果您的潜水舱内有任何东西漂浮：

.my-div文件{浮动：左；}
改进此答案
0
40
宽度：1px；白色空间：诺雷普；

对我来说很好：）

改进此答案
0
34

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

如果您正在使用显示：柔性无论出于何种原因，您都可以使用：

分区{显示：内联-灵活；}

这在浏览器中也得到了广泛支持。

改进此答案
1
  • 最后一个犬科动物参考！
    – 英菲冈
    评论 2023年2月3日21:03
31

只需在CSS文件中添加样式

分区{宽度：适合；}
改进此答案
1
  • 我对为什么SO允许这么多几乎重复的答案感到困惑。
    – 大卫·斯佩克特
    评论 2023年6月24日17:22
30

好 啊，在许多情况下，您甚至不需要像默认的div那样做任何事情高度和宽度作为汽车，但如果不是您的情况，请申请内联块显示器会为你工作。。。看看我为你创建的代码，它就是做你想做的事：

分区{显示：嵌入式块；}
<div><表格><tr><td>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。莫比·乌尔里奇斯·费吉亚特·马塞德·拉里特（Morbi ultrices feugiat massa sed laoreet）。Maecenas et magna egestas，facilisis purus quis，前庭笔尖</td><td>活着的人是活着的。Sed enim nisi、feugiat Sed accumsan eu、convallis eget felis。Pellentesque consequat eu leo nec pharetra公司。Aenean interdum enim dapibus直径</td><td>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。莫比·乌尔里奇斯·费吉亚特·马塞德·拉里特（Morbi ultrices feugiat massa sed laoreet）。Maecenas et magna egestas，facilisis purus quis，前庭笔尖</td></tr></表格></div>

改进此答案
29

只需将宽度和高度设置为适中即可。这很简单。

分区{宽度：适合；身高：适中；填充：10px；}

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

改进此答案
2
  • 除添加：10px；部分，这与2013年5月27日0:41发布的答案相同
    – 马克·斯图尔特
    评论 2021年10月18日19:04
  • 宽度：“fit-content”，
    – Chanrithisak Phok公司
    评论 2023年3月30日15:00
28

你可以试试这个代码。遵循CSS部分中的代码。

分区{显示：嵌入式块；填充：2vw；背景色：绿色；}表格{宽度：70vw；背景色：白色；}
<div><表格边框=“colapsed”><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr><tr><td>苹果</td><td>香蕉</td><td>草莓</td></tr></表格></div>

改进此答案
22

尝试使用宽度：最大含量属性根据div的内容大小调整其宽度。

试试这个例子，

<!DOCTYPE html><html><头部><样式>第1部分{宽度：500px；边距：自动；边框：3px实心#73AD21；}第2部分{宽度：最大含量；边距：自动；边框：3px实心#73AD21；}</样式></头><body><div class=“ex1”>此div元素的宽度为500px</div（分频）><br>宽度（按内容大小）</body></html>
改进此答案
20

只需使用显示：内联；（或白色空间：诺雷普；).

我希望你觉得这很有用。

改进此答案
20

你可以使用内联块如@user473598，但要注意旧的浏览器。。

/*你正在与合作*/显示：嵌入式块；/*对于IE 7*/缩放：1；*显示：内联；/*对于Mozilla Firefox<3.0*/显示：-moz-inline-stack；

Mozilla根本不支持内联块，但他们有-moz串联两者大致相同

周围有一些跨浏览器内联块显示属性：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网站/

改进此答案
0
20
<table cellpadding=“0”cellspacing=“O”border=“0“><tr><td><div id=“content_lalala”>div中的内容位于表中，不需要内联属性，并且表是扩展到此div的内容的表=）</div></td></tr></表格>

我知道人们有时不喜欢表，但我必须告诉你，我尝试过css内联攻击，它们在一些div中有点管用，但在其他div中没有，所以，将扩展div封装在表中确实更容易。。。而且。。。它可以有或没有inline属性，但表仍然是保存内容总宽度的表。=）

改进此答案
0
16

这里有一个工作演示-

.浮点框{显示：-moz-inline-stack；显示：嵌入式块；宽度：适合；身高：适中；宽度：150px；高度：75px；边距：10px；边框：3px实心#73AD21；}
<h2>The Way正在使用内联块</h2>CSS中还添加了支持元素。<div>浮动框<div class=“floating box”>浮动框</div>浮动框浮动框浮动框浮动框浮动框<div class=“floating box”>浮动框</div></div>

改进此答案
12

我的CSS3 flexbox解决方案有两种风格：顶部的解决方案表现为span，底部的解决方案则表现为div，通过包装器获取所有宽度。它们的类分别是“top”、“bottom”和“bottomwrapper”。

车身{font-family：无衬线；}.顶部{显示：-webkit-inline-flex；显示：内联-灵活；}顶部、底部{背景色：#3F3；边框：2px实心#FA6；}/*底部包装将占用剩余的宽度*/.底部包装{显示：-webkit-flex；显示：flex；}表格{边界崩塌：崩塌；}表，th，td{宽度：280px；边框：1px实心#666；}第个{背景色：#282；颜色：#FFF；}td（时域）{颜色：#444；}th、td{填充：0 4px 0 4px；}
这是吗<div class=“top”><表格><tr>操作系统版本</tr><tr><td>开放BSD</td><td>5.7</td></tr><tr><td>Windows（窗口）</td><td>请升级到10</td></tr></表格></div>你在找什么？<br>或者可能是。。。<div class=“bottomwrapper”><div class=“bottom”><表格><tr>操作系统版本</tr><tr><td>OpenBSD（打开BSD）</td><td>5.7</td></tr><tr><td>Windows（窗口）</td><td>请升级到10</td></tr></表格></div></div>这就是你要找的。

改进此答案
1
  • 荣誉显示：内联-灵活；顺便说一句，Chrome 62、firefox 57和safari 11没有前缀
    – 霍拉西奥
    评论 2017年11月24日3:06
11

篡改Firebug我找到了属性值-moz拟合内容这正是OP想要的，可以如下使用：

宽度：-moz-fit-content；

虽然它只在Firefox上运行，但我找不到任何与Chrome等其他浏览器等效的浏览器。

改进此答案
1
  • 截至2017年1月，IE（所有版本，包括Edge和手机）和Opera Mini不支持适合的。Firefox仅支持宽度。其他浏览器也很支持它。
    – 加文
    评论 2017年1月11日22:30
11
<div class=“parentDiv”style=“display:inline-block”>//HTML元素</div>

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

改进此答案
1
  • 有没有一种方法可以将此仅应用于垂直大小以最小化并保持水平大？
    – 地精
    评论 2018年2月22日10:15
11

尝试显示：嵌入式块；。要实现跨浏览器兼容，请使用以下css代码。

分区{显示：嵌入式块；显示：-moz-inline-stack；缩放：1；*显示：内联；边框样式：实心；border-color:#0000ff；}
<div><表格><tr><td>第1列</td><td>第2列</td><td>第3列</td></tr></表格></div>

改进此答案
11

div公司{宽度：适合；}
<div><表格></表格></div>

改进此答案
1
  • 1
    必须是宽度：-moz-fit-content；在Firefox上工作。
    – 月饼
    评论 2021年3月22日14:43
10
.外部{宽度：适合；显示：flex；对齐项目：居中；}.外部.内容{宽度：100%；}<div class=outer><div class=content>在此处添加内容</div></div>
改进此答案
7

我解决了一个类似的问题（我不想使用显示：内联块因为项目居中）跨度标签内的div公司标记，并从外部移动CSS格式div公司标记到新内部跨度标签。如果显示：内联块不是一个适合你的答案。

改进此答案
7

我们可以在div公司元素：

显示：表格；

或者，

显示：嵌入式块；

我更喜欢使用显示：表格；，因为它自己处理所有额外的空间。While期间显示：内联块需要一些额外的空间。

改进此答案
1
2