成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

zhkai / 2096人閱讀

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

一.浮動布局

1.先讓固定寬度的div浮動！使其脫離文檔流。
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必須一左一右浮動。

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布局

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

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

內(nèi)容區(qū)域的div直接寫出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è)浮動，右側(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.
阮一峰老師寫的教程權(quán)威傳送門：http://www.ruanyifeng.com/blo...

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114014.html

相關(guān)文章

  • CSS基礎(chǔ)篇--頁面實(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ò)展性的頁面布局》中介紹了如下三種布局方式：1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定2.左右結(jié)構(gòu)，左邊固定，右邊100%...

    RichardXG 評論0 收藏0

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

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

    Sunxb 評論0 收藏0

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

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

    includecmath 評論0 收藏0

  • CSS原生布局方式

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

    PingCAP 評論0 收藏0

  • css常見的各種布局上（兩列布局）

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

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<