CSSでページを並べ替える

Question

私のページを水平方向に、垂直方向に再帰的にタイルしたいと思います。例えば。ページが3つの列に分割され、それによって第3列が2つの行に分割される。あなたは、コンテンツの追加を開始するまで、 https://jsfiddle.net/zuyu1ed7/

このデザイン作品：

<div id="left/> 
<div id="right"> 
    <div id="top">...</div> 
    <div id="bottom">...</div> 
</div> 

このバイオリンは私が何を言っているかを説明します。これらのコンテナの1つに境界線、マージンまたはパディングがあると、カオスが発生します。全体のレイアウトは非常に賢明であるようです。

また、これらのコンテナ内に<div style="width:100%; padding: 10px;"/>を追加しようとすると、同じレイアウト破壊効果があります。このような状況は、CSSについての私の知識を放棄するものです。

最初は、CSSがあなたを嘲笑し続けるなら、あなたの親友、テーブルを使うことを考えました。しかし、その後、html5はほとんどのcolgroup属性をサポートしていないことがわかりました。そのアイデアはデッドエンドでした。

私の質問は：どのように私はdivの水平と垂直にフィドルに示されているように分割し、コンテナにコンテンツを追加することができますか？
私はどんなソリューションにも感謝していますが、もちろん、私はすべてのブラウザで動作するソリューションを好むでしょう。

Answer 1

flexboxとお考えですか？ 基本的にはby all modern browsersに対応しています。

Fiddle

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
#left { 
 
    height: 100%; 
 
    width: 20%; 
 
    background-color: Blue; 
 
} 
 

 
#right { 
 
    height: 100%; 
 
    width: 80%; 
 
    background-color: Green; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#top { 
 
    width: 100%; 
 
    height: 33.33%; 
 
    background-color: lightblue; 
 
} 
 

 
#center { 
 
    width: 100%; 
 
    height: 33.33%; 
 
    background-color: lightgreen; 
 
} 
 

 
#bottom { 
 
    width: 100%; 
 
    height: 33.34%; 
 
    background-color: black; 
 
    display: flex; 
 
} 
 

 
#bottom-left { 
 
    height: 100%; 
 
    width: 35%; 
 
    background-color: Yellow; 
 
} 
 

 
#bottom-right { 
 
    height: 100%; 
 
    width: 65%; 
 
    background-color: orange; 
 
}

<div id="left"> 
 
    </div> 
 
    <div id="right"> 
 
     <div id="top"></div> 
 
     <div id="center"></div> 
 
     <div id="bottom"> 
 
      <div id="bottom-left"></div> 
 
      <div id="bottom-right"></div> 
 
     </div> 
 
    </div>