html – 使最后一个元素采取保持宽度与包装(和与IE9支持)

我正在寻找一种方法来对齐多个项目,彼此相邻,让他们包装一旦他们填满了行,最后一个项目占据了最后一行的剩余宽度。

我已经在一个类似的主题上发现了多个问题,解决方案通常使项目使用float:left将它们对齐在一行上,溢出:隐藏在最后一个元素,使其自动占用剩余的空间。这些解决方案在单行中工作正常,但是如果在最后一个元素之前有足够的项目,它们就会停止工作,并将它们换行成多行。然后,“last”元素仍然呈现在第一行(如果有足够的空间),使它不再是最后一个元素。

但是,我想让最后一个元素始终保持最后一个元素,让它在最后一行 – 无论是哪一行,并自动占用剩余的空间。

这是非常简单的包装flexbox,因为你只需要把flex:0 auto放在前面的项目,使他们占用他们需要的任何空间(不需要更多),flex:1上最后一个元素,其余部分。但是,我需要支持Internet Explorer 9,所以flexbox是不幸的出了问题。

这是情况看起来像。运行代码段时,您可以使用“切换flex box”按钮切换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>
这里是解决方案:

>添加< div style =“clear:left; margin-top:22px”>< / div>之前的.last元素*
>添加margin-top:-22px;到.last,其中该量与线高度大致相同
>如果你不想让它太小添加min-width到.last,它会像你所期望的那样工作最小宽度: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只是为了避免输入滑动,以防容器中没有元素。它应该是输入的负余量的绝对值

http://stackoverflow.com/questions/34681218/make-last-element-take-remaining-width-with-wrapping-and-with-ie9-support

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 使最后一个元素采取保持宽度与包装(和与IE9支持)