Javascript 带有标签的表格+；野战单位可包装，但包装后排列整齐

我有一个由一系列标签和字段组成的流体设计表单，我希望它们一个接一个地流动，如果需要，可以包裹起来以支持窗口的宽度。（标签和输入必须作为一个单元流动，不能在一行末尾挂起标签，在下一行输入。）但当它们包装时，我希望字段整齐排列。有什么方法可以用HTML和CSS做到这一点吗？（不幸的是，我必须支持没有CSS3列的旧浏览器[如果它们在这里有帮助的话]。）

我尝试过几种方法，比如给标签（好吧，标签中的跨距）一个固定的长度（您需要单击代码段中的“全屏”按钮，这样代码段窗口的宽度就不会固定）：

.wrapped字段标签{
显示：内联块；
}
.wrapped字段标签>范围{
显示：内联块；
宽度：8em；
空白：nowrap；
}

简称：
字段的长标签：
中等标签：
简称：
字段的长标签：
中等标签：

我认为最好的解决方案是将所有标签放在一个div中，并将所有输入放在一个div中。然后，我将输入分组到列中

以下是一个例子：

.column{
显示：内联块；
保证金：10px 0px 10px 0px；
}
.标签{
显示：内联块；
}
.投入{
显示：内联块；
左边距：10px；
}

形式
字段名：


简称：


字段名：


更长的字段名：


还有一些字段名：


不太长：

警告：此解决方案使用JavaScript 要使用JavaScript实现这一点，首先需要确定应该有多少列。如果您在知道列数之前尝试设置宽度，那么最终可能会将输入推离末尾，并导致混乱

我计算列数的方法是从将所有列都放在一行开始向后计算。对于每种可能性，我将最大列宽（和其他额外空间）相加，并检查总数是否大于可用空间。如果总数更大，那么我减去一列并重试，从而确保列的最大数量

最后，当我有一个解决方案时，我将每个

span

的

style.width

设置为该列的最大宽度，以便每个列中的所有

label

s大小相同

一个问题是，如果第一列比其他列窄得多，那么该列中除第一个元素外的所有元素都可能无法正确包装。为了解决这个问题，我从可用空间中减去一行中元素的总宽度，然后将每行中最后一个

标签的
右边距设置为该数字（为了安全起见，减4个像素）

下面是一个工作示例。继续全屏显示并调整大小；我有一个
resize
事件处理程序，所以它应该可以工作


jQuery（函数（$）{
var有效宽度；
var$elements=$（'.wrapped字段span'）；
风险值宽度=[]；
$elements.each（函数setWidth（）{
widths.push（$（this.width（））；
});
var inputWidth=$elements.first（）.parent（）.width（）-widths[0]；
函数getMaxWidth（大小、列）{
var max=0；
var行=0；
变量长度=宽度。长度；
变量索引=列+（大小*行）；
while（索引<长度）{
宽度=宽度[索引]；
如果（宽度>最大值）{
最大值=宽度；
}
行++；
索引=列+（大小*行）；
}
返回最大值；
}
函数tryGroup（n）{
//从内联块空间开始
风险价值总额=4*（n-1）；
var maxWidths=[]；
var-w；
var i=0；
对于（；i0；i--）{
结果=试验组（i）；
如果（结果）{
打破
}
}
如果（！结果）{
log（'错误：没有足够的空间'）；
返回；
}
var maxWidths=结果[0]；
var总计=结果[1]；
变量大小=maxWidths.length；
var afterSpace=可用宽度-总计-4；
$elements.每个（函数集宽度（索引，el）{
变量宽度=最大宽度[索引%大小]；
var parent=el.parentElement；
el.style.width=宽度+px；
如果（索引%size==大小-1）{
parent.style.marginRight=afterSpace+'px'；
}否则{
parent.style.marginRight=''；
}
});
}
对齐列（）；
$（窗口）。调整大小（对齐列）；
});
.wrapped字段标签{
显示：内联块；
}
.wrapped字段标签>范围{
显示：内联块；
宽度：自动；
空白：nowrap；
}

简称：
字段的长标签：
中等标签：
微小的：
字段的较长标签：
中长标签：
谢谢，但不幸的是，当它们包装时，它们与上面的不一致。如果你在通常的固定宽度显示中运行代码片段，你就会看到我所描述的问题：底部有两个字段，它们看起来完全独立于上面的四个字段，并且与之无关。遗憾的是，不支持CSS3列的浏览器不支持flexbox。我明白你的意思。我会努力修正我的答案。谢谢。同时，我将回过头来谈谈支持IE9和IE10的要求。他们有很小的妈妈