当文本用 CSS 或 Javascript/JQuery 换行时将 div 缩小到内容

Question

(https://i.sstatic.net/nSchqcaP.png)](https://i.sstatic.net/77sH1HeK.png)

我有一个 3 列的块，希望它们之间有一个公共空间。我无法强制元素的宽度，因为我不知道。我可以制作 3 列，宽度为 33%，但在这种情况下，空白空间将不相等，因为第一个标题比其他标题小。

我的问题是，当文本在一行上时没问题，但当它分成两行时，空间不再相等（正如您在图片中看到的那样）。

我想我可以通过CSS（例如通过

fit-content

）来做到这一点，但没有结果。如果发现一些旧的js，但如果我们调整浏览器窗口的大小，大小不会缩小或扩大，则这只在加载时起作用。

Answer 1

首先感谢您的回答。

我尝试这个代码：https://codepen.io/jeromeminn/pen/gOVQVaX [https://codepen.io/jeromeminn/pen/gOVQVaX][1]

    <style>

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 40px;
grid-row-gap: 0px;
}

.container {
display: flex; /* or inline-flex */
flex-direction: row;
flex-wrap: nowrap;
justify-content:space-between;
gap: 10px;
}

.item {
flex-grow:1;
flex-basis:0;
    
}
        
</style>

    <div class="parent">
<div style="background-color: #B5B5B5; width: fit-content"><h1>go to market</h1></div>
<div style="background-color: #C7C7C7; width: fit-content"><h1>branding &amp; sustainability</h1></div>
<div style="background-color: #CDCDCD; width: fit-content"><h1>product as a service</h1></div>
</div>
    
<div style="clear: both"></div>
    
<div class="container" style="width: 100%">
<div class="item" style="background-color: #B5B5B5; width: fit-content"><h1>go to market</h1></div>
<div class="item" style="background-color: #C7C7C7; width: fit-content"><h1>branding &amp; sustainability</h1></div>
<div class="item" style="background-color: #CDCDCD; width: fit-content"><h1>product as a service</h1></div>
</div>

但如您所见，没有人发挥作用。我无法设置以像素或百分比为单位的宽度，因为 3 列没有相同长度的文本，如果我将父 div 的宽度设置为“fit-content”，那就可以了，空间会像这样重新分配我想要，但是当文本换行为 2 行时，H1 标记不会采用文本的宽度，而是在右侧添加额外的空间（也许浏览器无法计算新的宽度？！）。

谢谢你， 问候 杰罗姆