通过包装使最后一个元素采用剩余宽度(并带有IE9支持) [英] Make last element take remaining width with wrapping (and with IE9 support)

问题描述

我正在寻找一种使多个项目彼此相邻对齐的方法，一旦它们填满了行，就将它们包裹起来，最后一个项目占用了最后一行的剩余宽度 .

I’m looking for a way to align multiple items next to each other, having them wrap once they fill up the line, and the last item take up the remaining width of the last line.

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

I have found multiple questions on a similar topic before, with solutions generally making the items use float: left to align them on a line, and overflow: hidden on the last element which makes it take up the remaining space automatically. Those solutions work fine in a single line, but they stop working once there are enough items before the last element, that they wrap into multiple lines. Then, the "last" element is still rendered in the first row (if there is enough space), making it no longer be the last element.

但是，我希望最后一个元素始终保持最后一个元素，将其保留在最后一行(无论是哪一行)中，并自动占用那里的剩余空间.

However, I want the last element to stay the last element at all times, to have it in the last row—whatever row that is—and automatically take up the remaining space there.

使用包裹式Flexbox，这非常简单，因为您只需将 flex:0 auto 放在前面的项目上，以使其占据所需的任何空间(无需占用更多空间)，并且 flex:1 在最后一个元素上，以使其占用其余部分. 但是，我需要支持Internet Explorer 9，因此不幸的是，flexbox根本无法解决问题.

This is pretty simple with a wrapping flexbox, since you just need to put flex: 0 auto on the former items to make them take up whatever space they need (without taking more), and flex: 1 on the last element to make it take up the remainder. However, I need to support Internet Explorer 9, so flexbox is unfortunately out of the question.

情况就是这样.运行代码段时，您可以使用切换弹性框"按钮切换弹性框模式，该模式显示应该的外观.

This is how the situation looks like. When running the snippet, you can use the "Toggle flex box" button to toggle flexbox mode which shows the way it should look like.

* { 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>

推荐答案

以下是解决方法:

• 在 .last 元素*之前添加< div style ="clear:left; margin-top:22px"></div> li>
• 在 .last 中添加 margin-top:-22px; ，其中金额与行高大致相同
• 如果您不希望它变得太小，请在 .last 中添加 min-width ，这样可以正常工作
  也 min-width:1px; 在类中需要避免在特殊情况下为0.

• Add a <div style="clear:left;margin-top:22px"></div> before the .last element*
• Add margin-top: -22px; to .last where the amount is about the same as the line-height
• If you dont want it to get too small add min-width to .last and it will work as you'd expect
  Also min-width: 1px; is requiered in the class to avoid it getting 0 in special cases.

在IE8 +，Edge，Chrome，Opera和Firefox中经过测试并可以正常工作

Tested and working in 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 只是为了避免在容器中没有任何元素的情况下输入滑落.它应该是输入的负边距的绝对值

* margin-top:22px only to avoid the input to slip over in case there are no elements in the container. It should be the absolute value of the negative margin of the input

这篇关于通过包装使最后一个元素采用剩余宽度(并带有IE9支持)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！