【发布时间】：2020-06-07 13:12:06
【问题描述】：
我编写了一个脚本（在此处的用户的帮助下），它允许我扩展选定的 div 并通过平均拉伸以适应剩余空间来使其他 div 相应地运行（除了宽度固定的第一个） .
这是我想要实现的目标的图片：
为此，我使用 flex 和 transitions。
效果很好，但是 jQuery 脚本指定了一个“400%”的拉伸值（这对于测试来说非常有用）。
现在我希望所选 div 扩展/收缩以完全适合内容，而不是“400%”固定值。
我不知道我该怎么做。
有可能吗？
我尝试克隆 div，使其适合内容，获取其值，然后使用此值进行转换，但这意味着我有一个以百分比为单位的初始宽度，但以像素为单位的目标值。这行不通。
如果我将像素值转换为百分比，那么无论出于何种原因，结果都不完全适合内容。
在所有情况下，无论如何，这似乎都是一种复杂的方式来实现我想要的。
是否有任何 flex 属性可以转换以适应所选 div 的内容？
这里是代码（编辑/简化，以便更好地阅读）：
var expanded = '';
$(document).on("click", ".div:not(:first-child)", function(e) {
var thisInd =$(this).index();
if(expanded != thisInd) {
//fit clicked fluid div to its content and reset the other fluid divs
$(this).css("width", "400%");
$('.div').not(':first').not(this).css("width", "100%");
expanded = thisInd;
} else {
//reset all fluid divs
$('.div').not(':first').css("width", "100%");
expanded = '';
}
});.wrapper {
overflow: hidden;
width: 100%;
margin-top: 20px;
border: 1px solid black;
display: flex;
justify-content: flex-start;
}
.div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid black;
text-align:center;
}
.div:first-child {
min-width: 36px;
background: #999;
}
.div:not(:first-child) {
width: 100%;
transition: width 1s;
}
.div:not(:first-child) span {
background: #ddd;
}
.div:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on the div you want to fit/reset (except the first div)
<div class="wrapper">
<div class="div"><span>Fixed</span></div>
<div class="div"><span>Fluid (long long long long long text)</span></div>
<div class="div"><span>Fluid</span></div>
<div class="div"><span>Fluid</span></div>
</div>这里是 jsfiddle：
https://jsfiddle.net/zajsLrxp/1/
编辑：在大家的帮助下，这是我的工作解决方案（窗口大小更新 + div 数和动态计算的第一列宽度）：
var tableWidth;
var expanded = '';
var fixedDivWidth = 0;
var flexPercentage = 100/($('.column').length-1);
$(document).ready(function() {
// Set width of first fixed column
$('.column:first-child .cell .fit').each(function() {
var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
});
$('.column:first-child' ).css('min-width',fixedDivWidth+'px')
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})
$(window).resize( function() {
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
})
$(document).on("click", ".column:not(:first-child)", function(e) {
var thisInd =$(this).index();
// if first click on a fluid column
if(expanded != thisInd)
{
var fitDivWidth=0;
// Set width of selected fluid column
$(this).find('.fit').each(function() {
var c = $(this)[0].getBoundingClientRect().width;
if( c > fitDivWidth ){fitDivWidth = c;}
});
tableWidth = $('.mainTable')[0].getBoundingClientRect().width;
$(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
// Use remaining space equally for all other fluid column
$('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
expanded = thisInd;
}
// if second click on a fluid column
else
{
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
}
});body{
font-family: 'Arial';
font-size: 12px;
padding: 20px;
}
.mainTable {
overflow: hidden;
width: 100%;
border: 1px solid black;
display: flex;
margin-top : 20px;
}
.cell{
height: 32px;
border-top: 1px solid black;
white-space: nowrap;
}
.cell:first-child{
background: #ccc;
border-top: none;
}
.column {
border-right: 1px solid black;
transition: flex 0.4s;
overflow: hidden;
line-height: 32px;
text-align: center;
}
.column:first-child {
background: #ccc;
}
.column:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text">Click on the header div you want to fit/reset (except the first one which is fixed)</span>
<div class="mainTable">
<div class="column">
<div class="cell"><span class="fit">Propriété</span></div>
<div class="cell"><span class="fit">Artisan 45</span></div>
<div class="cell"><span class="fit">Waterloo 528</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Adresse</span></div>
<div class="cell"><span class="fit">Rue du puit n° 45 (E2)</span></div>
<div class="cell"><span class="fit">Chaussée de Waterloo n° 528 (E1)</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Commune</span></div>
<div class="cell"><span class="fit">Ixelles</span></div>
<div class="cell"><span class="fit">Watermael-Boitsfort</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Ville</span></div>
<div class="cell"><span class="fit">Marche-en-Famenne</span></div>
<div class="cell"><span class="fit">Bruxelles</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Surface</span></div>
<div class="cell"><span class="fit">120 m<sup>2</sup></span></div>
<div class="cell"><span class="fit">350 m<sup>2</sup></span></div>
</div>
</div>这是一个成熟的例子（样式 + 填充 + 更多数据）：
https://jsfiddle.net/zrqLowx0/2/
谢谢大家！
【问题讨论】：
-
请在您的问题中添加最终结果，显示您在这一切之后创建的内容。我对它的样子很感兴趣。谢谢！ （...也许对它的用途有所了解？...）
-
好的，我会在清除脚本中所有不必要的元素后立即执行此操作（我猜几分钟后）。也就是说，我该怎么做？即使 Azametzin 的答案非常好，我是否只是编辑原始帖子并添加我的看法？我改变了一些东西，但 90% 是一样的（不过我很乐意展示它）..
-
重点是：我模拟一种 excel 电子表格，我希望人们能够单击特定列以适应内容。通常一个表可以，但是当以我想要的方式调整它们的大小时，列的行为不正确（一次很容易扩展一列，但很难让其他列实时行为以占用剩余空间的方式flex 会为 div 做。它们只是不规则地扩展。我做了一些研究，我想要的对于表格来说是不可能的）。我不使用表或数据表还有其他原因，但这超出了本文的范围。
-
很简单，只需点击“编辑”，转到问题的末尾并开始添加一些简单的思考，包括一个新的 sn-p（全部）。确保默认“隐藏 sn-p”（左下角复选框），减少对“新读者”的干扰/分心。我的第一个想法是你将把它用于一些花哨的“口琴”式小部件、图标和所有东西。电子表格，嗯，我确实有一些全屏，使用此处讨论的相同原则（如果您有兴趣），向上/向下/向左/向右伸展。
-
太好了，您在发布最终结果时付出了额外的努力。让回答关于 SO 的问题更有意义！恭喜...
标签： javascript jquery css flexbox css-transitions