資訊專欄INFORMATION COLUMN
摘要：一目的要?jiǎng)?chuàng)建一個(gè)響應(yīng)式頁面右側(cè)邊欄為，左側(cè)內(nèi)容為。當(dāng)窗口寬度小于時(shí)，上述在上，在下，隨著窗口大小的變化，二者的與自動(dòng)調(diào)整。移動(dòng)到上面實(shí)現(xiàn)的效果如下圖在窗口寬度小于時(shí)，右側(cè)邊欄內(nèi)容在網(wǎng)頁上方顯示，不合格。
一、目的
要?jiǎng)?chuàng)建一個(gè)響應(yīng)式頁面：
右側(cè)邊欄為div.right-bottom，左側(cè)內(nèi)容為div.left-top。
當(dāng)窗口寬度大于700px時(shí)，隨著窗口大小的變化，div.right-bottom的width與height固定不變，div.left-top的width與height自動(dòng)調(diào)整。
當(dāng)窗口寬度小于700px時(shí)，上述div.left-top在上，div.right-bottom在下，隨著窗口大小的變化，二者的width與height自動(dòng)調(diào)整。
效果如下圖：
二、代碼與分析 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 { /* 清浮動(dòng) */
zoom: 1;
}
.section:after { /* 清浮動(dòng) */
content: "";
display: block;
clear: both;
}
.left-top {
margin-right: 280px;
}
.right-bottom {
float: right;
width: 250px;
}
}
實(shí)現(xiàn)的效果如下圖：
顯然是不合格的。
2.2 第二種方案我們?cè)?b>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.
實(shí)現(xiàn)的效果如下圖：
在窗口寬度小于700px時(shí)，右側(cè)邊欄內(nèi)容在網(wǎng)頁上方顯示，不合格。
2.3 第三種方案我們?cè)?b>html代碼中，將div.right-bottom重新移到div.left-bottom下方，并改變div.right-bottom的樣式。CSS代碼如下：
@media (min-width: 700px) {
.section {
position: relative; /* 為了配合 div.right-bottom 的絕對(duì)定位 */
zoom: 1; /* 清浮動(dòng) */
}
.section:after { /* 清浮動(dòng) */
content: "";
display: block;
clear: both;
}
.left-top {
margin-right: 280px;
}
.right-bottom {
position: absolute; /* 絕對(duì)定位 */
top: 0;
right: 0;
width: 250px;
}
}
實(shí)現(xiàn)效果如下：
乍一看，已經(jīng)符合要求，但是，在窗口寬度大于700px條件下，調(diào)整窗口寬度大小，當(dāng)div.left-top高度小于div.right-bottom時(shí)，問題出現(xiàn)了：
由于div.right-bottom采用了絕對(duì)定位，脫離了標(biāo)準(zhǔn)文檔流，所以div.section的height就等于div.left-top的height。div.footer與div.right-bottom重疊。
2.4 第四種方案（正確方案）前三種方案都有問題，那么，這個(gè)問題應(yīng)該怎么解決呢？請(qǐng)看下列代碼。
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; /* 清浮動(dòng) */
}
.section:after { /* 清浮動(dòng) */
content: "";
display: block;
clear: both;
}
.left-top-wrapper {
width: 100%; /* 若無此句，width 則為 100% + 280px ，超出窗口寬度 */
float: left; /* 浮動(dòng)，脫離標(biāo)準(zhǔn)文檔流，使 div.right-bottom-wrapper 的頂端與之平齊 */
margin-right: -280px; /* 右側(cè)讓出 280px，放置 div.right-bottom */
}
.left-top {
margin-right: 280px; /* 讓出280px，以免文字與 div.right-bottom重疊 */
}
.right-bottom {
float: right;
width: 250px;
}
}
實(shí)現(xiàn)效果如下：
尤其注意在窗口寬度大于700px條件下，調(diào)整窗口寬度大小，當(dāng)div.left-top高度小于div.right-bottom時(shí)的效果：
參考維珍集團(tuán)官網(wǎng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111310.html
摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...
摘要：布局結(jié)果依然后前兩種相似，代碼如下。如果你還有好的方法，請(qǐng)一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實(shí)現(xiàn)邊欄固定中間自適應(yīng)的欄布局 設(shè)計(jì)一個(gè)頁面，經(jīng)常會(huì)遇到3欄布局，包括左右邊欄和中間主題內(nèi)容，一般情況下都是邊欄固定，中間自適應(yīng)，常用的方法主要有4種：自身浮動(dòng)、絕對(duì)定位，margin負(fù)值和flex布局，今天主要一起看一看這種布局的實(shí)現(xiàn)，首先來看一看效果： See the Pen...
摘要：布局結(jié)果依然后前兩種相似，代碼如下。如果你還有好的方法，請(qǐng)一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實(shí)現(xiàn)邊欄固定中間自適應(yīng)的欄布局 設(shè)計(jì)一個(gè)頁面，經(jīng)常會(huì)遇到3欄布局，包括左右邊欄和中間主題內(nèi)容，一般情況下都是邊欄固定，中間自適應(yīng)，常用的方法主要有4種：自身浮動(dòng)、絕對(duì)定位，margin負(fù)值和flex布局，今天主要一起看一看這種布局的實(shí)現(xiàn)，首先來看一看效果： See the Pen...
摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識(shí)，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個(gè)前端人員，我們首先會(huì)做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...
摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學(xué)可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識(shí)，這里進(jìn)行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計(jì)稿時(shí)，作為一個(gè)前端人員，我們首先會(huì)做的應(yīng)該是為設(shè)計(jì)圖大致地劃分區(qū)域，然后選擇一...
閱讀 5289·2021-09-22 15:59
閱讀 1868·2021-08-23 09:42
閱讀 2570·2019-08-29 18:42
閱讀 3454·2019-08-29 10:55
閱讀 2067·2019-08-27 10:57
閱讀 1764·2019-08-26 18:27
閱讀 2729·2019-08-23 18:26
閱讀 2927·2019-08-23 14:40
