資訊專欄INFORMATION COLUMN
摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。博客園的很多主題也是這樣設(shè)計的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應區(qū)固定寬度區(qū)代碼這樣實現(xiàn)，的實際寬度就是屏幕寬度。
我在前面有一篇文章《CSS基礎(chǔ)篇--可擴展性的頁面布局》中介紹了如下三種布局方式：
1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定
2.左右結(jié)構(gòu)，左邊固定，右邊100%
3.左中右結(jié)構(gòu)，左邊固定，右邊固定，中間100%
上面介紹的就是為了兼容一下低版本瀏覽器的實現(xiàn)方式，沒有使用像column或者flex啥的布局方式。但，我下面的講解還是為了兼容低版本的實現(xiàn)方式做的總結(jié)，只是實現(xiàn)的方法多了幾種羅列下。
不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。
博客園的很多主題也是這樣設(shè)計的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應屏幕的布局方式。
html代碼：
固定寬度區(qū)自適應區(qū)
實現(xiàn)方式方式有如下幾種：
1.固定寬度區(qū)浮動，自適應區(qū)不設(shè)寬度而設(shè)置 margin我們以右側(cè)寬度固定，左側(cè)寬度自適應為例：
css代碼：
#sidebar {
float: right; width: 300px;
}
#content {
margin-right: 300px;
}
實現(xiàn)效果圖：
右側(cè)一直固定不動，左側(cè)根據(jù)屏幕的剩余大小自適應。
但實際上這個方法是有局限性的，那就是html結(jié)構(gòu)中sidebar必須在content之前才行！
但我需要sidebar在content之后！因為我的content里面才是網(wǎng)頁的主要內(nèi)容，我不想主要內(nèi)容反而排在次要內(nèi)容后面。
那么上面講解的第一種方法就無效了。
就需要下面的方法來實現(xiàn)。
2.float與margin配合使用首先我們調(diào)整一下html結(jié)構(gòu)：
自適應區(qū)固定寬度區(qū)
css代碼：
#content {
margin-left: -300px; float: left; width: 100%;
}
#content .contentInner{
margin-left:300px;
}
#sidebar {
float: right; width: 300px;
}
這樣實現(xiàn)，contentInner的實際寬度就是屏幕寬度-300px。
3.固定寬度區(qū)使用絕對定位，自適應區(qū)設(shè)置marginhtml結(jié)構(gòu)
我現(xiàn)在的結(jié)構(gòu)是在前面固定寬度區(qū)
css代碼：
#wrap{
position:relative;
}
#content {
margin-right:300px;
}
#sidebar {
position:absolute;
width:300px;
right:0;
top:0;
}
4.使用display:table實現(xiàn)
html結(jié)構(gòu)：
我現(xiàn)在的結(jié)構(gòu)是在前面固定寬度區(qū)
css代碼：
#wrap{
display:table;
width:100%;
}
#content {
display:table-cell;
}
#sidebar {
width:300px;
display:table-cell;
}
當然最后一種方法在IE7以及以下瀏覽器不兼容，因為IE7設(shè)置display為table不識別。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110827.html
【第一列或某兩列固定寬度，最后一列占據(jù)頁面剩余寬度（即寬度自適應）】 寫這篇文章主要是為了解決一個實際遇到的問題：左右兩列布局，左側(cè)寬度固定，右側(cè)寬度自適應（或左中右三列布局，左側(cè)和中間寬度固定，右側(cè)寬度自適應），當頁面寬度變化時，怎樣使右側(cè)元素中的內(nèi)容始終在頁面剩余寬度中居中顯示，將右側(cè)元素設(shè)置了text-align: center;之后，問題其實也就是怎樣讓右側(cè)元素的寬度占據(jù)頁面剩余所有寬度。...
【第一列或某兩列固定寬度，最后一列占據(jù)頁面剩余寬度（即寬度自適應）】 寫這篇文章主要是為了解決一個實際遇到的問題：左右兩列布局，左側(cè)寬度固定，右側(cè)寬度自適應（或左中右三列布局，左側(cè)和中間寬度固定，右側(cè)寬度自適應），當頁面寬度變化時，怎樣使右側(cè)元素中的內(nèi)容始終在頁面剩余寬度中居中顯示，將右側(cè)元素設(shè)置了text-align: center;之后，問題其實也就是怎樣讓右側(cè)元素的寬度占據(jù)頁面剩余所有寬度。...
摘要：不做過多解釋主要是記錄一個完整的布局樣式，實現(xiàn)頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不做過多解釋：主要是記錄一個完整的布局樣式，實現(xiàn)頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。 不多少代碼奉上： CSS樣式代碼： /******************** *公共標簽樣式 ********************/ /********************...
摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...
CSS Reset 1.作用 （1）清除瀏覽器默認樣式（2）全局樣式定義 2.特別注意 （1）項目開發(fā)初期就定義好（2）reset.css 在引入的時候一定要放在第一位（3）不同的產(chǎn)品reset.css不一樣 3.table合并邊框間距 table { border-collapse: collapse; // 合并邊框 border-spacing: 0; //邊框間距。當 `borde...
閱讀 866·2021-11-25 09:44
閱讀 1086·2021-11-19 09:40
閱讀 7112·2021-09-07 10:23
閱讀 1987·2019-08-28 17:51
閱讀 1117·2019-08-26 10:59
閱讀 1939·2019-08-26 10:25
閱讀 3149·2019-08-23 18:22
閱讀 872·2019-08-23 16:58
