css布局多行多列

css布局常用的方法：float : none | left | right

取值：

none :　預設值。物件不飄浮

left :　文字流向物件的右邊

right :　文字流向物件的左邊

它是怎樣工作的，看個一行兩列的例子

xhtml:

這裡是第一列

這裡是第二列

css:

#wrap

#column1

#column2

.clear

position : static | absolute | fixed | relative

取值：

static :　預設值。無特殊定位，物件遵循html定位規則

absolute :　將物件從文件流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件，則依據 body 物件。而其層疊通過 z-index 屬性定義

fixed :　未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範

relative :　物件不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文件流中偏移位置

它來實現一行兩列的例子

xhtml:

這裡是第一列

這裡是第二列

css:

#wrap

#column1

#column2

他們的區別在哪?

顯然，float是相對定位的，會隨著瀏覽器的大小和解析度的變化而改變，而position就不行了，所以一般情況下還是float布局！

css常用布局例項

一列單行一列

body

#content

兩行一列

body

#content-top

#content-end

三行一列

body

#content-top

#content-mid

#content-end

兩列單行兩列

#bodycenter

#bodycenter #dv1

#bodycenter #dv2

兩行兩列

#header

#bodycenter

#bodycenter #dv1

#bodycenter #dv2

三行兩列

#header

#bodycenter

#bodycenter #dv1

#bodycenter #dv2

#footer

三列單行三列

絕對定位

#left

#middle

#right

float定位

xhtml:

這裡是第一列

這裡是第二列

這裡是第三列

css:

#wrap

#column

#column1

#column2

#column3

.clear

float定位二

xhtml:

css:

body

.column

#center

#left

#right

兩行三列

xhtml:

這裡是頂行

這裡是第一列

這裡是第二列

這裡是第三列

css:

#header

#wrap

#column

#column1

#column2

#column3

.clear

三行三列

xhtml:

這裡是頂行

這裡是第一列

這裡是第二列

這裡是第三列

這裡是底部一行

css:

#header

#wrap

#column

#column1

#column2

#column3

.clear

#footer

ps:這裡列出的是常用的例子，而非研究之用，對一每個盒子，我都沒有設定margin,padding,boeder等屬性，是因為我個人覺得，含有寬度定位的時候，最好不好用到他們，除非必不得已，因為如果不是這樣的話，解決瀏覽器相容問題，會讓你頭疼，而且產生一系列css**，我覺得這樣的效率和效果都不好！

css布局高階技巧

margin和padding總是有可能要用到，而產生的問題如何解決呢？由於瀏覽器解釋容器寬度的方法不同：

ie 6.0 firefox opera等是

真實寬度=width+padding+border+margin

ie5.x

真實寬度=width-padding-border-margin

很明顯，第一種下很完美的布局在第二種情況下後果是很悽慘的！

解決的方法是 hack

div.content \""; 忽略了"\"}\""後的內容

voice-family:inherit;

width:300px; //包括ie6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的

} html>body .content

div.content

html>body .content

列等高技巧

n行n列布局，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，做法有：背景圖填充、加js指令碼的

方法和容器溢位部分隱藏和列的負底邊界和正的內補丁相結合的方法。

背景圖填充法：

xhtml:

這是第一列

這是第二列

css:

#wrap

#column1

#column2

.clear

就是將乙個npx寬的一張在外部容器縱向重複，定位到兩列交錯的位置縱向重複，在視覺上產生了兩列高度一樣的錯覺

css布局多行多列

CSS多列布局

CSS多列布局

CSS多列布局

css布局 多行多列

CSS多列布局

CSS多列布局

CSS多列布局

相關推薦

css布局多行多列