關於div布局的一點心得

標籤：absolute   style   display   網頁   標籤   

   如果是嵌套的div布局，外面的div 比如是<div  class="container"></div>這時候設定的是一個大的外架構，置中顯示。我們要在裡面嵌套div來

顯示內容，這時候就通過<div style="display:block;position:relative"></div>來使得div標籤的位置是相對於外面最靠近它的父級標籤也就是<div  class="container"></div>

這樣我們就可以通過設定第二級的style裡面的left和top屬性解決兩層布局問題了，但是我們網頁的布局肯定不會這麼簡單，至少得涉及到<div>標籤的三層嵌套吧。我們現在已經知道第二級用的樣式是positon:realative

但是嵌套在<div style="display:block;position:relative"></div>裡面的display屬性不能用realative而應該用absolute，只有這樣做才能使得第三層的<div></div>的布局位置相對與第二層排布

於是困惱我多天的布局問題就解決啦。

 

基本的格式如下：

           <div class="container">

                  <div style="display:block;position:relative">

                          <div style="display:block;position:absolute" >

           

                         </div>

                  </div>  

           </div>

本文出自 “一步一步成長” 部落格，請務必保留此出處http://9262494.blog.51cto.com/9252494/1537572