Html 使用包装（和IE9支持）使最后一个元素具有剩余宽度

我正在寻找一种方法，使多个项目彼此相邻对齐，让它们在填满行后进行包装，最后一个项目占据最后一行的剩余宽度

我以前在一个类似的主题上发现过多个问题，解决方案通常使项目使用

float:left

将它们对齐一行，并在最后一个元素上使用

overflow:hidden

，使其自动占用剩余空间。这些解决方案在一行中可以很好地工作，但一旦最后一个元素前面有足够的项，它们就会停止工作，并被包装成多行。然后，“最后一个”元素仍在第一行渲染（如果有足够的空间），使其不再是最后一个元素

但是，我希望最后一个元素始终保持最后一个元素，使其位于最后一行中，不管是哪一行，并自动占用剩余的空间

这对于包装flexbox非常简单，因为您只需要在前一个项目上放置

flex:0 auto

，使其占用所需的任何空间（不占用更多空间），并在最后一个元素上放置

flex:1

，使其占用剩余空间但是，我需要支持Internet Explorer 9，因此很遗憾，flexbox是不可能的。

情况就是这样。运行代码段时，您可以使用“Toggle flex box”（切换flex box）按钮切换flexbox模式，该模式显示了代码段的外观

*{框大小：边框框；}
.集装箱{
宽度：300px；
背景：雪；
填充物：5px；
溢出：自动；
}
.元素{
浮动：左；
保证金：2px 5px 2px 0；
背景：薰衣草；
}
.最后{
溢出：隐藏；
}
.last>输入{
宽度：100%；
}
/*使用flex-box的工作解决方案*/
.flex.容器{
显示器：flex；
柔性包装：包装；
}
.flex.元素{
flex:0自动；
}
.flex.最后一个{
弹性：1；
}

福
富吧
福吧巴兹酒店
福
富吧
福吧巴兹酒店
福
富吧
福吧巴兹酒店
切换flex box

以下解决方案并不完美，它使用的是位置黑客。如果禁用

溢出：隐藏

您将看到每个

实际上与容器具有相同的宽度。但是，通过一些CSS视觉上的调整，它看起来不错，可能可以正常工作

第1期：如果键入的字符数超出了视觉上的显示范围，则整个视图将向左移动

解决方法1:将

maxlength

值设置为

可能会有所帮助

*{
框大小：边框框；
}
.集装箱{
宽度：300px；
背景：雪；
填充物：5px；
位置：相对位置；
溢出：隐藏；/*隐藏溢出*/
}
跨度：之后{
内容：“\00A0”/*仅限一个无中断空间*/
}
输入{
宽度：100%；
位置：绝对；/*无任何上/右/下/左值*/
边框：2倍纯色灰色；
边框宽度：0 2px 0；
}
输入：焦点{
大纲：0；
}

FooFoo barFoo bar baz
FooFoo barFoo酒吧Bazzoo barFoo酒吧baz bla

以下是解决方案：

• 在

  .last

  元素之前添加一个
  *
• 添加

  页边距顶部：-22px至
  .last
  ，其中金额与行高大致相同

• 如果您不希望它变得太小，请将

  minwidth

  添加到

  .last

  中，它将按照您的预期工作
  同时

  minwidth:1px以避免在特殊情况下得到0

在IE8+、Edge、Chrome、Opera和Firefox中测试和工作

*{框大小：边框框；}
.集装箱{
宽度：300px；
背景：雪；
填充物：5px；
溢出：自动；
}
.元素{
浮动：左；
保证金：2px 5px 2px 0；
背景：薰衣草；
}
.最后{
溢出：隐藏；
利润上限：-22px；
最小宽度：1px；
}
.last>输入{
宽度：100%；
}
.集装箱，打开{
清除：左；
利润上限：22像素
}

福
富吧
福吧巴兹酒店
福
富吧
福吧巴兹布
福
富吧
福吧巴兹酒店
福
富吧
福吧巴兹酒店
福
富吧
福吧巴兹酒店
福巴阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿阿
Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar baz Foo bar

对于希望使用脚本选项的所有其他人，这里也为您提供了一个脚本选项

只需将

data calcattr

添加到要将其

width

属性设置为

width:calc（100%-？px）的元素中

，其中

？-px

是其当前宽度

旁注：

脚本可能需要进行调整，以弥补未来的边界、边距等，因此此脚本更像是一种方法

函数calcattr（）{
var els=document.querySelectorAll（“[data calcattr]”）；
//TODO:添加开关以启用计算。不同的属性，如
//通过检查
//data calcattr值，即：data calcattr='height'
对于（i=0；i