成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

（CSS） 帶有右側(cè)邊欄的響應(yīng)式頁面的CSS樣式

546669204 / 3477人閱讀

摘要：一目的要創(chuàng)建一個響應(yīng)式頁面右側(cè)邊欄為，左側(cè)內(nèi)容為。當窗口寬度小于時，上述在上，在下，隨著窗口大小的變化，二者的與自動調(diào)整。移動到上面實現(xiàn)的效果如下圖在窗口寬度小于時，右側(cè)邊欄內(nèi)容在網(wǎng)頁上方顯示，不合格。

一、目的

要創(chuàng)建一個響應(yīng)式頁面：

右側(cè)邊欄為div.right-bottom，左側(cè)內(nèi)容為div.left-top。

當窗口寬度大于700px時，隨著窗口大小的變化，div.right-bottom的width與height固定不變，div.left-top的width與height自動調(diào)整。

當窗口寬度小于700px時，上述div.left-top在上，div.right-bottom在下，隨著窗口大小的變化，二者的width與height自動調(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 {           /* 清浮動 */
    zoom: 1;
  }

  .section:after {     /* 清浮動 */
    content: "";
    display: block;
    clear: both;
  }

  .left-top {
    margin-right: 280px;
  }

  .right-bottom {
    float: right;
    width: 250px;
  }
}

實現(xiàn)的效果如下圖：

顯然是不合格的。

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.

實現(xiàn)的效果如下圖：

在窗口寬度小于700px時，右側(cè)邊欄內(nèi)容在網(wǎng)頁上方顯示，不合格。

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;
  }
}

實現(xiàn)效果如下：

乍一看，已經(jīng)符合要求，但是，在窗口寬度大于700px條件下，調(diào)整窗口寬度大小，當div.left-top高度小于div.right-bottom時，問題出現(xiàn)了：

由于div.right-bottom采用了絕對定位，脫離了標準文檔流，所以div.section的height就等于div.left-top的height。div.footer與div.right-bottom重疊。

2.4 第四種方案（正確方案）

前三種方案都有問題，那么，這個問題應(yī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;                /* 清浮動 */
  }

  .section:after {          /* 清浮動 */
    content: "";
    display: block;
    clear: both;
  }

  .left-top-wrapper {
    width: 100%;            /* 若無此句，width 則為 100% + 280px ，超出窗口寬度 */
    float: left;            /* 浮動，脫離標準文檔流，使 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;
  }
}

實現(xiàn)效果如下：

尤其注意在窗口寬度大于700px條件下，調(diào)整窗口寬度大小，當div.left-top高度小于div.right-bottom時的效果：

參考

維珍集團官網(wǎng)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111310.html

相關(guān)文章

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會被擠到下一列圣杯布局和雙飛翼布局都會用到?？梢酝ㄟ^設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對布局，以及對應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現(xiàn)方式（包括傳統(tǒng)的...

    includecmath 評論0 收藏0

  • 4種方法實現(xiàn)邊欄固定中間自適應(yīng)的3欄布局

    摘要：布局結(jié)果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現(xiàn)邊欄固定中間自適應(yīng)的欄布局 設(shè)計一個頁面，經(jīng)常會遇到3欄布局，包括左右邊欄和中間主題內(nèi)容，一般情況下都是邊欄固定，中間自適應(yīng)，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現(xiàn)，首先來看一看效果： See the Pen...

    EddieChan 評論0 收藏0

  • 4種方法實現(xiàn)邊欄固定中間自適應(yīng)的3欄布局

    摘要：布局結(jié)果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現(xiàn)邊欄固定中間自適應(yīng)的欄布局 設(shè)計一個頁面，經(jīng)常會遇到3欄布局，包括左右邊欄和中間主題內(nèi)容，一般情況下都是邊欄固定，中間自適應(yīng)，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現(xiàn)，首先來看一看效果： See the Pen...

    MoAir 評論0 收藏0

  • 結(jié)合CSS3的布局新特征談?wù)劤Ｒ姴季址椒?/b>

    摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計稿時，作為一個前端人員，我們首先會做的應(yīng)該是為設(shè)計圖大致地劃分區(qū)域，然后選擇一...

    xuhong 評論0 收藏0

  • 結(jié)合CSS3的布局新特征談?wù)劤Ｒ姴季址椒?/b>

    摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。 寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結(jié)。 常見的頁面布局 在拿到設(shè)計稿時，作為一個前端人員，我們首先會做的應(yīng)該是為設(shè)計圖大致地劃分區(qū)域，然后選擇一...

    cnTomato 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<