可擴展性的頁面布局：左右結(jié)構(gòu)，左中右結(jié)構(gòu)

XBaron 發(fā)布于2019-08-28 17:51 / 3165人閱讀

摘要：左右結(jié)構(gòu)，左邊右邊寬度固定左右結(jié)構(gòu)，左邊固定，右邊左中右結(jié)構(gòu)，左邊固定，右邊固定，中間這里是左邊這里是中間這里是右邊

左右結(jié)構(gòu)，左邊100%；右邊寬度固定

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML

左右結(jié)構(gòu)，左邊固定，右邊100%

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar{float:left; width:200px; margin-top:10px; height:200px;    background:#AAA;}
#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html

左中右結(jié)構(gòu)，左邊固定，右邊固定，中間100%;

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}
#main {margin-left:438px; background:#999; height:200px;}
#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html




    這里是左邊
    
        這里是中間
    
    這里是右邊

GPU云服務(wù)器云服務(wù)器左中右 html表格左中右 html多頁面結(jié)構(gòu) html5頁面結(jié)構(gòu)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110829.html

相關(guān)文章

CSS基礎(chǔ)篇--頁面實現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。博客園的很多主題也是這樣設(shè)計的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應(yīng)屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應(yīng)區(qū)固定寬度區(qū)代碼這樣實現(xiàn)，的實際寬度就是屏幕寬度。我在前面有一篇文章《CSS基礎(chǔ)篇--可擴展性的頁面布局》中介紹了如下三種布局方式：1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定2.左右結(jié)構(gòu)，左邊固定，右邊100%...

RichardXG 2019-08-28 17:51 評論0 收藏0
CSS基礎(chǔ)篇--可擴展性的頁面布局

摘要：左右結(jié)構(gòu)，左邊右邊寬度固定代碼代碼左右結(jié)構(gòu)，左邊固定，右邊代碼代碼左中右結(jié)構(gòu)，左邊固定，右邊固定，中間代碼代碼這里是左邊這里是中間這里是右邊 1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定 showImg(http://segmentfault.com/img/bVbSYw); css代碼： #header{height:80px; background:#CCC;} #center{ov...

CarlBenjamin 2019-08-28 17:51 評論0 收藏0
布局總結(jié)-水平居中布局的實現(xiàn)

摘要：布局一左右布局實現(xiàn)左右布局居中布局的幾個實現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡單，就是一個父元素里面套了一個子元素想要實現(xiàn)左右布局，只需要把設(shè)置成向左浮動，右邊向右浮動或者把和設(shè)置成二居中布局結(jié)構(gòu)居中布局的幾個實現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡單，就是一個父元素 CSS布局一、左右布局 1、float實現(xiàn)左右布局 ...

MadPecker 2019-08-01 17:42 評論0 收藏0
布局總結(jié)-水平居中布局的實現(xiàn)

摘要：布局一左右布局實現(xiàn)左右布局居中布局的幾個實現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡單，就是一個父元素里面套了一個子元素想要實現(xiàn)左右布局，只需要把設(shè)置成向左浮動，右邊向右浮動或者把和設(shè)置成二居中布局結(jié)構(gòu)居中布局的幾個實現(xiàn)方案標(biāo)簽結(jié)構(gòu)很簡單，就是一個父元素 CSS布局一、左右布局 1、float實現(xiàn)左右布局 ...

starsfun 2019-08-30 15:53 評論0 收藏0
三欄布局的n種實現(xiàn)

摘要：本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。每一種布局都會有個，個人依然認為文章里帖代碼并沒有來的直接。其中討論了這么多種種布局，有以下理由是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會有個Demo，個人依然認為文章里帖代碼并沒有Demo來的直接。...

aisuhua 2019-08-29 10:54 評論0 收藏0