使用包装使最后一个元素占用剩余宽度(并使用IE9支持)

Question

我正在寻找一种方法来将多个项目彼此相邻对齐,让它们在填满线条后进行换行,最后一个项目占用最后一行的剩余宽度.

我之前在类似主题上发现了多个问题,解决方案通常使项目用于float: left将它们对齐在一条线上,而overflow: hidden最后一个元素则使它自动占用剩余空间.这些解决方案在一行中工作正常,但是一旦在最后一个元素之前有足够的项目,它们就会停止工作,它们会被包装成多行.然后,"last"元素仍然在第一行中呈现(如果有足够的空间),使其不再是最后一个元素.

但是,我希望最后一个元素始终保持最后一个元素,将它放在最后一行 - 无论是什么行 - 并自动占用那里的剩余空间.

这是一个非常简单的包装Flexbox,因为你只需要放置flex: 0 auto前面的项目,使它们占用他们需要的任何空间(不需要更多),并flex: 1在最后一个元素上使其占用剩余部分.但是,我需要支持Internet Explorer 9,因此不幸的是,flexbox是不可能的.

这就是情况的样子.当运行片段,您可以使用"切换柔性框"按钮,切换Flexbox的模式,这表明它的方式应该的样子.

* { box-sizing: border-box; }
.container {
  width: 300px;
  background: snow;
  padding: 5px;
  overflow: auto;
}
.element {
  float: left;
  margin: 2px 5px 2px 0;
  background: lavender;
}
.last {
  overflow: hidden;
}
.last > input {
  width: 100%;
}

/* Working solution with flex box */
.flex .container {
  display: flex;
  flex-wrap: wrap;
}
.flex .element {
  flex: 0 auto;
}
.flex .last {
  flex: 1;
}

<div class="container">
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>

  <div class="last"><input type="text" /></div>
</div>

<div class="container">
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>

  <div class="last"><input type="text" /></div>
</div>

<button onclick="this.parentNode.classList.toggle('flex')">Toggle flex box</button>

Answer 1

这是解决方案:

• <div style="clear:left;margin-top:22px"></div>在.last元素之前添加*
• 添加margin-top: -22px;到.last金额与行高相同的位置
• 如果你不希望它得到太小添加min-width到.last,也将努力为您期望
  同样min-width: 1px;在需要选用类,以避免它在特殊情况下得到0.

在IE8 +,Edge,Chrome,Opera,Firefox中经过测试和使用

* { box-sizing: border-box; }
.container {
  width: 300px;
  background: snow;
  padding: 5px;
  overflow: auto;
}
.element {
  float: left;
  margin: 2px 5px 2px 0;
  background: lavender;
}
.last {
  overflow: hidden;
  margin-top: -22px;
  min-width: 1px;
}
.last > input {
  width: 100%;
}
.container .unwrap {
  clear: left;
  margin-top: 22px
}

<div class="container">
  <div class="unwrap"></div>
  <div class="last"><input type="text" /></div>
</div>

<div class="container">
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>
  <div class="unwrap"></div>
  <div class="last"><input type="text" /></div>
</div>

<div class="container">
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz boo</div>
  <div class="unwrap"></div>
  <div class="last" style="min-width: 100px">
    <input type="text" placeholder="min-width 100px" />
  </div>
</div>

<div class="container">
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>
  <div class="unwrap"></div>
  <div class="last"><input type="text" /></div>
</div>

<div class="container">
  <div class="element">Foo</div>
  <div class="element">Foo bar</div>
  <div class="element">Foo bar baz</div>
  <div class="element">Foo baaaaaaaaaaaaaaaaaaaaaaar</div>
  <div class="unwrap"></div>
  <div class="last"><input type="text" /></div>
</div>

<div class="container">
  <div class="element">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</div>
  <div class="unwrap"></div>
  <div class="last"><input type="text" /></div>
</div>

*margin-top:22px仅在容器中没有元素的情况下避免输入滑过.它应该是输入负边际的绝对值