0

http://jsfiddle.net/f8n9e/1/

<div class="row">
    <div class="col col-span-9" style="height:150px;">0</div>
    <div class="col col-span-3">1</div>
    <div class="col col-span-3">2</div>
    <div class="col col-span-3">3</div>
</div>

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-9 {
  flex-basis: 75%;
}

.col {
  background-color: #999999;
  background-clip: content-box;
  border: 1px solid rgba(0,0,0,0.1);
}

私はこのコードを持っていますが、結果は私が望むものではありません。この例のようなことを達成するにはどうすればよいですか? 新しいhtml要素なしで、cssプロパティにのみ興味があります。

--------------------
|         |    1    |
|    0    |---------|
|         |    2    |
|         |---------|
|         |    3    |
--------------------
4

1 に答える 1

0

あなたが求めていることは、指定された高さも必要とする列方向を使用してのみ達成できます。

http://jsfiddle.net/f8n9e/2/

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 10em;
}

それ以外の場合は、余分な要素を追加する必要があります。また、Firefox は Flexbox のラッピングをまったくサポートしていません。

于 2013-11-12T17:39:44.513 に答える