資訊專欄INFORMATION COLUMN
摘要：一目的要創建一個響應式頁面右側邊欄為，左側內容為。當窗口寬度小于時，上述在上，在下，隨著窗口大小的變化，二者的與自動調整。移動到上面實現的效果如下圖在窗口寬度小于時，右側邊欄內容在網頁上方顯示，不合格。
一、目的
要創建一個響應式頁面：
右側邊欄為div.right-bottom，左側內容為div.left-top。
當窗口寬度大于700px時，隨著窗口大小的變化，div.right-bottom的width與height固定不變，div.left-top的width與height自動調整。
當窗口寬度小于700px時，上述div.left-top在上，div.right-bottom在下，隨著窗口大小的變化，二者的width與height自動調整。
效果如下圖：
二、代碼與分析 2.1 第一種方案left-top
Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.
right-bottom
But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.
@media (min-width: 700px) {
.section { /* 清浮動 */
zoom: 1;
}
.section:after { /* 清浮動 */
content: "";
display: block;
clear: both;
}
.left-top {
margin-right: 280px;
}
.right-bottom {
float: right;
width: 250px;
}
}
實現的效果如下圖：
顯然是不合格的。
2.2 第二種方案我們在html代碼中，把div.right-bottom移到div.left-top上方。CSS樣式不變。
right-bottom
But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.
left-top
Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.
實現的效果如下圖：
在窗口寬度小于700px時，右側邊欄內容在網頁上方顯示，不合格。
2.3 第三種方案我們在html代碼中，將div.right-bottom重新移到div.left-bottom下方，并改變div.right-bottom的樣式。CSS代碼如下：
@media (min-width: 700px) {
.section {
position: relative; /* 為了配合 div.right-bottom 的絕對定位 */
zoom: 1; /* 清浮動 */
}
.section:after { /* 清浮動 */
content: "";
display: block;
clear: both;
}
.left-top {
margin-right: 280px;
}
.right-bottom {
position: absolute; /* 絕對定位 */
top: 0;
right: 0;
width: 250px;
}
}
實現效果如下：
乍一看，已經符合要求，但是，在窗口寬度大于700px條件下，調整窗口寬度大小，當div.left-top高度小于div.right-bottom時，問題出現了：
由于div.right-bottom采用了絕對定位，脫離了標準文檔流，所以div.section的height就等于div.left-top的height。div.footer與div.right-bottom重疊。
2.4 第四種方案（正確方案）前三種方案都有問題，那么，這個問題應該怎么解決呢？請看下列代碼。
left-top
Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.
right-bottom
But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.
@media (min-width: 700px) {
.section {
zoom: 1; /* 清浮動 */
}
.section:after { /* 清浮動 */
content: "";
display: block;
clear: both;
}
.left-top-wrapper {
width: 100%; /* 若無此句，width 則為 100% + 280px ，超出窗口寬度 */
float: left; /* 浮動，脫離標準文檔流，使 div.right-bottom-wrapper 的頂端與之平齊 */
margin-right: -280px; /* 右側讓出 280px，放置 div.right-bottom */
}
.left-top {
margin-right: 280px; /* 讓出280px，以免文字與 div.right-bottom重疊 */
}
.right-bottom {
float: right;
width: 250px;
}
}
實現效果如下：
尤其注意在窗口寬度大于700px條件下，調整窗口寬度大小，當div.left-top高度小于div.right-bottom時的效果：
參考維珍集團官網
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111310.html
摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。 本文首發于知乎專欄：前端指南 CSS布局 布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...
摘要：布局結果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現邊欄固定中間自適應的欄布局 設計一個頁面，經常會遇到3欄布局，包括左右邊欄和中間主題內容，一般情況下都是邊欄固定，中間自適應，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現，首先來看一看效果： See the Pen...
摘要：布局結果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現邊欄固定中間自適應的欄布局 設計一個頁面，經常會遇到3欄布局，包括左右邊欄和中間主題內容，一般情況下都是邊欄固定，中間自適應，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現，首先來看一看效果： See the Pen...
摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。 寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。 常見的頁面布局 在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...
摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。 寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。 常見的頁面布局 在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...
閱讀 5264·2021-09-22 15:59
閱讀 1855·2021-08-23 09:42
閱讀 2560·2019-08-29 18:42
閱讀 3444·2019-08-29 10:55
閱讀 2057·2019-08-27 10:57
閱讀 1759·2019-08-26 18:27
閱讀 2722·2019-08-23 18:26
閱讀 2911·2019-08-23 14:40
