DIV布局之道一：DIV塊的水平并排、垂直并排

昵稱10504424 2014-02-24

展開全文

DIV布局網(wǎng)頁元素的方式主要有三種：平鋪（并排）、嵌套、覆蓋（遮擋）。本文先講解平鋪（并排）方式。

1、垂直平鋪（垂直排列）

請看如下代碼

CSS部分：

CSS Code復(fù)制內(nèi)容到剪貼板

.lay1{ width:200px; height:20px; border:1px solid #FF6699;}
.lay2{ width:200px; height:20px; border:1px solid #FF6699;}
.lay3{ width:200px; height:20px; border:1px solid #FF6699;}

HTML部分：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="lay1"></div>
<div class="lay2"></div>
<div class="lay3"></div>

我們看到這里有三個(gè)DIV塊，三個(gè)DIV塊呈上下并列分布，這種方式就是常見的DIV “ 垂直平鋪方式”，也是最為常見的布局網(wǎng)頁的方式，預(yù)覽效果：

我們可以看到網(wǎng)頁中有三個(gè)“方塊”呈上下排列。

2、水平平鋪（水平排列）：

我們要讓上例中的三個(gè)DIV塊呈水平排列該如何改寫代碼呢？其實(shí)只要我們相應(yīng)的樣式中加一個(gè)float:left 即可：

CSS部分：

CSS Code復(fù)制內(nèi)容到剪貼板

.lay1{ width:100px; height:20px; border:1px solid #FF6699; float:left}
.lay2{ width:100px; height:20px; border:1px solid #FF6699; float:left}
.lay3{ width:100px; height:20px; border:1px solid #FF6699; float:left}

HTML部分無需任何修改，預(yù)覽效果：

這個(gè)時(shí)候，就把三個(gè)DIV塊水平平鋪了。不難吧？

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：昵稱10504424 > 《工作》

舉報(bào)/認(rèn)領(lǐng)