CSSのグリッド - 親の100％どのような方法 - テーブルセル/フロート/インラインブロック？

Question

は、ここに私のシンプルなグリッドこの

• .leftが
• .rightが.wrapの30％を持っている.wrap幅の70％と.wrap高さの100％を持っている満たすために最善である方法

  <div class="wrap"> 
      <div class="left"> 
      </div> 
      <div class="right"> 
      <div class="top"> 
      </div> 
      <div class="bottom"> 
      </div> 
      </div> 
  </div> 
  

  です.wrap高さの幅と100％

• .topと.bottomは、高さの50％が.right 100％幅

それは私がもしtable-cell、inline-blockまたはfloat ING最適な方法を知らないこの

のようになります。私はflexboxが最も簡単な解決策であることを知っていますが、私はそれを行う方法を他の方法を知りたいと思います。

は、私はあなたが私たちは、本部のに floatプロパティを追加するCSS2で、本部のに box-sizing:border-boxと display:inline-block
を追加するべきであるだけでなく

Answer 1

codepenを作成しました。 27行目backgroung

.wrap { 
 
    width: 75%; 
 
    margin: auto; 
 
    border: 1px dotted black; 
 
    height: 200px; 
 
    font-size: 0; 
 
    box-sizing: border-box; 
 
} 
 
.left { 
 
    width: 70%; 
 
    height: 100%; 
 
    background: blue; 
 
    box-sizing:border-box; 
 
    display:inline-block; 
 
} 
 
.right { 
 
    width: 30%; 
 
    height: 100%; 
 
    background: red; 
 
    box-sizing:border-box; 
 
    display:inline-block; 
 
} 
 
.top { 
 
    width: 100%; 
 
    height: 50%; 
 
    background: green; 
 
} 
 
.bottom { 
 
    width: 100%; 
 
    height: 50%; 
 
    background: yellow; 
 
    box-sizing:border-box; 
 
    display:inline-block; 
 
}

<div class="wrap"> 
 
    <div class="left"> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="top"> 
 
    </div> 
 
    <div class="bottom"> 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/webafrooz/pen/ZWPBWW