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