css - divを使用したCSSレイアウト

Question

CSSを使用して小さなダッシュボードページを作成しています。使用する必要のあるレイアウトとdivを計画しているだけです。私はこれを実際よりも複雑にしていると思わずにはいられません。以下の画像を作成しました。各色は異なるdivを意味します。

メインの外側の赤は、ページのコンテンツdivになります。グレーとブルーのdivが必要かどうかわかりませんか？または、濃い赤のdivは灰色のdivの上にあり、青いdivの下にあります。

このかなりダフな絵をお詫びしますが、私は自分が考えていることを見せてみるのが最善だと思いました。

ありがとう

Answer 1

これを試して...

 <div id="wrap">

 <div class="box">
     <div class="title">
         <span class="left">Title</span>
         <span class="right">Link</span>
     </div>
     <div class="results">Results here...</div>
 </div>

 <div class="box">
     <div class="title">
         <span class="left">Title</span>
         <span class="right">Link</span>
     </div>
     <div class="results">Results here...</div>
 </div>

 <div class="box">
     <div class="title">
         <span class="left">Title</span>
         <span class="right">Link</span>
     </div>
     <div class="results">Results here...</div>
 </div>

 <div class="box">
     <div class="title">
         <span class="left">Title</span>
         <span class="right">Link</span>
     </div>
     <div class="results">Results here...</div>
 </div>

 </div>

#wrap {}
.box {display: inline-block; width: 400px; height: 400px; border: 1px solid blue; margin: 0 25px 50px 0;}
.title {position: relative; border: 1px solid red;}
.title span {position: absolute; top: 0; display: inline-block;}
.title .left {left: 0;}
.title .right {right: 0;}
.results {}

それが役に立てば幸い。