iv布局網頁元素的方式主要有三種：平鋪（併排）、巢狀、覆蓋（遮擋）。本文先講解平鋪（併排）方式。
1、垂直平鋪（垂直排列）
請看如下**
css部分：
css code
複製內容到剪貼簿
.lay1
.lay2
.lay3
html部分：
xml/html code
複製內容到剪貼簿
<
divclass="lay1"
>
div>
<
divclass
="lay2"
>
div>
<
divclass
="lay3"
>
div>
我們看到這裡有三個div塊，三個div塊呈上下並列分布，這種方式就是常見的div 「 垂直平鋪方式」，也是最為常見的布局網頁的方式，預覽效果：
我們可以看到網頁中有三個「方塊」呈上下排列。
2、水平平鋪（水平排列）：
我們要讓上例中的三個div塊呈水平排列該如何改寫**呢？其實只要我們相應的樣式中加乙個float:left即可：
css部分：
css code
複製內容到剪貼簿
.lay1
.lay2
.lay3
html部分無需任何修改，預覽效果：
這個時候，就把三個div塊水平平鋪了。不難吧？
DIV布局之道二 DIV塊的巢狀，DIV盒子模型
本文講解div塊布局的第二種使用方式 巢狀。div巢狀 在有些文獻中也被稱為 盒子模型 說的通俗一點就是巢狀 乙個大的div塊內部又包含乙個或多個div塊 請看如下 css部分 css code 複製內容到剪貼簿 巢狀樣式 contain inner contain html部分 xml html ...
DIV居中之div水平居中 讓DIV布局居中
div 居中之div水平居中 讓div布局居中篇 如何讓div居中呢？如何讓div盒子水平居中呢？本節divcss5讓大家實現div布局水平居中。在布局一張網頁時，通常網頁主體框架是居中於瀏覽器中的。實現最外層div水平居中與瀏覽器中需要乙個條件和乙個設定。假如最外層div盒子的css命名為 div...
div水平居中及div水平垂直居中的方法總結
1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...