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

資訊專欄INFORMATION COLUMN

左側(cè)固定，右側(cè)自適應(yīng)的布局方式(新增評(píng)論區(qū)大佬教的方法）

zhkai / 1971人閱讀

摘要：一浮動(dòng)布局先讓固定寬度的浮動(dòng)使其脫離文檔流。的值等于固定的寬度相等。利用負(fù)值可以使得，后面的可以與前面的保持同行顯示。的寬度必須要減去的寬度要與固定寬度保持一致。內(nèi)容區(qū)域的直接寫(xiě)出即可。五左側(cè)浮動(dòng)，右側(cè)阮一峰老師寫(xiě)的教程權(quán)威傳送門(mén)

一.浮動(dòng)布局

1.先讓固定寬度的div浮動(dòng)！使其脫離文檔流。
2.margin-left的值等于固定div的寬度相等。

   .aside{
        float: left;
        width: 200px;
        background-color: red;
    }
    .content{
        margin-left: 200px;
        background-color: blue;
    }
    


    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.




    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
二.margin的負(fù)值(3個(gè)div)

是固定寬度的div脫離文檔流。

利用marin負(fù)值可以使得，后面的div可以與前面的div 保持同行顯示。

給包裹內(nèi)容的div加margin-left 可以使得與左邊的文字不重疊

.aside{
    float: left;
    margin-right: -200px;
    width: 200px;
    background-color: red;
}
.content{
    float: right;
}
.content .inner{
    margin-left: 200px;
    background-color: blue;
}

 

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.




   

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.

三.calc()計(jì)算屬性

注意：使用calc計(jì)算屬性的時(shí)候 運(yùn)算符(- +等等)兩邊必須有空格

注意兩個(gè)div必須一左一右浮動(dòng)。

calc的寬度必須要減去的寬度要與固定寬度保持一致。

  .aside{
      float: left;
      width: 200px;
      background-color: red;
  }
  .content{
      calc:(100% - 200px);
      background-color: blue;
  }

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.

四.flex布局

需要給父級(jí)div設(shè)置display: flex屬性。

固定寬度的div設(shè)置flex: 0 0 200px即可。

內(nèi)容區(qū)域的div直接寫(xiě)出flex: 1即可。

.container{
    display: flex;
}
.aside{
    flex: 0 0 200px;
    background-color: red; 
}
.content{
    flex: 1;
    background-color: blue;
}


    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
    

    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.

五.左側(cè)浮動(dòng)，右側(cè)overflow:hidden 
.aside{
    width: 200px;
    float: left;
    background-color: red;
}
.content{
    overflow: hidden;
    background-color: blue;
}


        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
    

    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
阮一峰老師寫(xiě)的教程權(quán)威傳送門(mén)：http://www.ruanyifeng.com/blo...

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

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

相關(guān)文章

  • CSS基礎(chǔ)篇--頁(yè)面實(shí)現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

    摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。博客園的很多主題也是這樣設(shè)計(jì)的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應(yīng)屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應(yīng)區(qū)固定寬度區(qū)代碼這樣實(shí)現(xiàn)，的實(shí)際寬度就是屏幕寬度。 我在前面有一篇文章《CSS基礎(chǔ)篇--可擴(kuò)展性的頁(yè)面布局》中介紹了如下三種布局方式：1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定2.左右結(jié)構(gòu)，左邊固定，右邊100%...

    RichardXG 評(píng)論0 收藏0

  • css實(shí)現(xiàn)左側(cè)寬度自適應(yīng)，右側(cè)固定寬度

    摘要：頁(yè)面布局中經(jīng)常用會(huì)遇到左側(cè)寬度自適應(yīng)，右側(cè)固定寬度，或者左側(cè)寬度固定，右側(cè)自適應(yīng)。一般固定寬度是導(dǎo)航欄，自適應(yīng)寬度的是主體內(nèi)容顯示區(qū)。 頁(yè)面布局中經(jīng)常用會(huì)遇到左側(cè)寬度自適應(yīng)，右側(cè)固定寬度，或者左側(cè)寬度固定，右側(cè)自適應(yīng)?？傊褪且贿吂潭▽挾龋贿呑赃m應(yīng)寬度。 一般固定寬度是導(dǎo)航欄，自適應(yīng)寬度的是主體內(nèi)容顯示區(qū)。 所以要實(shí)現(xiàn)這種布局，就先給出如下html結(jié)構(gòu)： 導(dǎo)航區(qū)域 ...

    Sunxb 評(píng)論0 收藏0

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

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

    includecmath 評(píng)論0 收藏0

  • CSS原生布局方式

    摘要：布局任何元素在默認(rèn)的情況下都是處于整個(gè)文檔流中的，不會(huì)浮動(dòng)的。相對(duì)定位如果想為元素設(shè)置層級(jí)布局模型中的相對(duì)定位，需要設(shè)置表示相對(duì)定位，它通過(guò)屬性確定元素在正常文檔流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言 網(wǎng)頁(yè)原生布局的方法其實(shí)網(wǎng)上有很多，大概為Flow（流動(dòng)布局模型）、Float...

    PingCAP 評(píng)論0 收藏0

  • css常見(jiàn)的各種布局上（兩列布局）

    摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁(yè)慕課網(wǎng)個(gè)人中心頁(yè)個(gè)人中心頁(yè)二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁(yè)3、慕課網(wǎng)個(gè)人中心頁(yè)4、github個(gè)人中心頁(yè)二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<