css-float - 填充剩余的水平空间(或最大宽度)并在最小宽度上换行

Question

#fit 和 #wrap 说明了我希望一个元素具有的两种不同的行为，具体取决于情况。如果有空间，该元素应该像 #fit 一样工作，但如果没有足够的空间，则应该像 #wrap 一样工作。

http://jsfiddle.net/benstenson/dN8VJ/

<div id="print">
    Printable
</div>
<div id="fit">
    Looks good on same line
</div>
<div id="wrap">
    Looks good on new line
</div>

CSS

body{overflow:hidden;padding:1em;}
div
{
    /*display:inline-block;*/
    float:left;
    height:1in;
    margin:.5em;text-align:center;line-height:1in;
    white-space:nowrap;box-shadow:0 0 .5em gray;
}
#print
{
    width:5in;
    background-color:black; color:white;
}
#fit
{
    /* when on same line
       Size to min-width
       OR fill remaining space
       (like flexible box style).
       Either way is fine.
    */
    min-width:3in;
    background-color:gold;
}
#wrap
{
    /* when wrapped to next line */
    /* fill 100% OR to max width */
    width:100%;
    min-width:3in;
    max-width:5in;
    background-color:orange;
}

Answer 1

您正在寻找的是 Flexbox，但大多数支持 Flexbox 的浏览器不支持换行。这样做的有 IE10、Chrome 和 Opera。

http://codepen.io/cimmanon/pen/lqrGB

<div class="container">
  <div id="print">
    Printable
  </div>
  <div id="either">
    Looks good on either line
  </div>
</div>

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}
.container div {
  height: 1in;
  margin: .5em;
  text-align: center;
  line-height: 1in;
  white-space: nowrap;
  box-shadow: 0 0 .5em gray;
}

#print {
  /*-webkit-flex: 1 5in;
  -ms-flex: 1 5in;
  flex: 1 5in;*/
  width: 5in;
  background-color: black;
  color: white;
}

#either {
  -webkit-flex: 1 3in;
  -ms-flex: 1 3in;
  flex: 1 3in;
  max-width: 5in;
  background-color: gold;
}