css實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)的布局方式

發(fā)布時(shí)間：2018-10-16 15:58:31 作者：李鋼鐵

這篇文章主要介紹了css實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)的布局方式，詳細(xì)的介紹了3種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一.浮動(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;
    }
    
<div class="aside">
    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.
</div>
<div class="content">
    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.
</div>

二.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;
}
<div class="aside">
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.
</div>
<div class="content">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia labore facere delectus quaerat expedita, tenetur recusandae tempora eos natus suscipit voluptatum necessitatibus soluta voluptates modi ullam. Ab minima similique, illum!
</div>
</div>

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

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

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

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

.aside{

float: left;
width: 200px;
}
.content{

float: right;
calc:(100% - 200px);
}
<div class="aside"> 
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.
</div>
<div class="content">
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.
</div>

四.flex布局

需要給父級(jí)div設(shè)置display: flex屬性。
固定寬度的div設(shè)置flex: 0 0 200px即可。
內(nèi)容區(qū)域的div直接寫出flex: 1即可。

body{
display: flex;
}
.aside{

flex: 0 0 200px;
background-color: red;
}
.content{

flex: 1;
background-color:blue;
}

<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo accusantium. Deleniti neque, pariatur voluptates maxime quam perferendis!
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora sequi minima, placeat esse nulla dolor dolores praesentium illo, distinctio fugiat eligendi debitis animi ut impedit, magni vitae officiis, architecto.
</div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。