使用 div 的 CSS 布局

Question

我正在使用 CSS 创建一个小仪表板页面，我只是在规划我需要使用的布局和 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 {}

希望对您有所帮助。