2

#fitそして、状況に応じて1 つの要素に持たせたい#wrap2 つの異なる動作を示します。要素は余裕がある場合と同様に機能する必要がありますが、十分な余裕がない場合と同様に機能する必要があります。#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;
}
4

2 に答える 2

2

探しているのは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;
}
于 2013-05-03T19:03:33.363 に答える