Css 在类似表格的布局中，将元素与行的底部对齐

我有以下组组件，根据视口大小，它将显示2列或3列：

var-toggleBtn=document.getElementById（'toggle'）；
var group=document.getElementById（'group'）；
toggleBtn.onclick=函数（e）{
if（toggleBtn.innerText===‘假大视口’）{
toggleBtn.innerText='假小视口'；
group.className='group big'；
}
否则{
toggleBtn.innerText='假大视口'；
group.className='group small'；
}
}

*{
框大小：边框框；
}
身体{
填充：0；
保证金：0；
字体系列：单空格，无衬线；
}
.组{
位置：相对位置；
边框：2倍实心#000；
利润率：10px；
填充：0 10px 10px；
}
.组：：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.项目{
位置：相对位置；
浮动：左；
填充：0 5px；
利润率：10px0；
}
.group.small.item{
宽度：50%；
}
.group.big.item{
宽度：33.3333%；
}
.组.小.项目：第n个孩子（2n+1），
.group.big.项：第n个子项（3n+1）{
填充：0 5px 0 0；
明确：两者皆有；
}
.组.小项目：第n个孩子（2n），
.group.big.项目：第n个子项（3n）{
填充：0 5px；
}
.细胞{
位置：相对位置；
背景：红色；
}
.组.小.项目：第n个子（2n+1）.单元，
.group.big.项：第n个子项（3n+1）.单元格{
背景：黄色；
}
.组.小.项目：第n个子（2n）.单元，
.group.big.项目：第n个子项（3n）.单元格{
背景：青色；
}
标签{
字体大小：.75rem；
}
输入{
位置：相对位置；
宽度：100%；
边界：无；
边框底部：2倍实心#000；
背景：透明；
大纲：无；
字体系列：单空格，无衬线；
}
#拨动{
位置：相对位置；
边界：无；
背景：#000；
大纲：无；
颜色：#FFF；
字体系列：单空格，无衬线；
填充：10px；
利润率：0.10px；
}

输入1布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
输入2 bla bla bla bla bla bla
输入3布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
输入4个bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla
输入5 bla bla bla bla bla bla
输入6布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
输入6布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
模拟小视口

您可以通过两种方式进行：

flexbox：

或者，如果您尝试使用更丰富的html结构，您可以通过垂直对齐对其进行归档：

如果我弄错了你的问题，请评论我的帖子

例如

document.getElementById("something").style.verticalalign = "top"

---

您可以使用内联块，而不是float

.item {
  display: inline-block;
  vertical-align: bottom;
}

var-toggleBtn=document.getElementById（'toggle'）；
var group=document.getElementById（'group'）；
toggleBtn.onclick=函数（e）{
if（toggleBtn.innerText===‘假大视口’）{
toggleBtn.innerText='假小视口'；
group.className='group big'；
}
否则{
toggleBtn.innerText='假大视口'；
group.className='group small'；
}
}

*{
框大小：边框框；
}
身体{
填充：0；
保证金：0；
字体系列：单空格，无衬线；
}
.组{
位置：相对位置；
边框：2倍实心#000；
利润率：10px；
填充：0 10px 10px；
字体大小：0；/*删除空白*/
}
.组：：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.项目{
位置：相对位置；
/*浮动：左*/
填充：0 5px；
利润率：10px0；
显示：内联块；/*已添加*/
垂直对齐：底部；/*已添加*/
字体大小：16px；/*重置字体大小*/
}
.group.small.item{
宽度：50%；
}
.group.big.item{
宽度：33.3333%；
}
.组.小.项目：第n个孩子（2n+1），
.group.big.项：第n个子项（3n+1）{
填充：0 5px 0 0；
明确：两者皆有；
}
.组.小项目：第n个孩子（2n），
.group.big.项目：第n个子项（3n）{
填充：0 5px；
}
.细胞{
位置：相对位置；
背景：红色；
}
.组.小.项目：第n个子（2n+1）.单元，
.group.big.项：第n个子项（3n+1）.单元格{
背景：黄色；
}
.组.小.项目：第n个子（2n）.单元，
.group.big.项目：第n个子项（3n）.单元格{
背景：青色；
}
标签{
字体大小：.75rem；
}
输入{
位置：相对位置；
宽度：100%；
边界：无；
边框底部：2倍实心#000；
背景：透明；
大纲：无；
字体系列：单空格，无衬线；
}
#拨动{
位置：相对位置；
边界：无；
背景：#000；
大纲：无；
颜色：#FFF；
字体系列：单空格，无衬线；
填充：10px；
利润率：0.10px；
}

输入1布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
输入2 bla bla bla bla bla bla
输入3 bla bla bla bla bla bla
输入4个bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla
输入5 bla bla bla bla bla bla
输入6布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
输入6布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
假小视口

显示：内联块代替浮动将允许使用垂直对齐

var-toggleBtn=document.getElementById（'toggle'）；
var group=document.getElementById（'group'）；
toggleBtn.onclick=函数（e）{
if（toggleBtn.innerText===‘假大视口’）{
toggleBtn.innerText='假小视口'；
group.className='group big'；
}
否则{
toggleBtn.innerText='假大视口'；
group.className='group small'；
}
}

*{
框大小：边框框；
}
身体{
填充：0；
保证金：0；
字体系列：单空格，无衬线；
}
.组{
位置：相对位置；
边框：2倍实心#000；
利润率：10px；
填充：0 10px 10px；
}
.组：：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.项目{
位置：相对位置；
显示：内联块；
垂直对齐：底部对齐；
填充：0 5px；
利润率：10px0；
}
.group.small.item{
宽度：50%；
}
.group.big.item{
宽度：3