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

小編給大家分享一下css如何實現(xiàn)左側(cè)固定右側(cè)自適應(yīng)的布局方式，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一.浮動布局

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

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

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

3. 給包裹內(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()計算屬性

注意：使用calc計算屬性的時候 運算符(- +等等)兩邊必須有空格

注意兩個div必須一左一右浮動。

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

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

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

3. 內(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>

看完了這篇文章，相信你對“css如何實現(xiàn)左側(cè)固定右側(cè)自適應(yīng)的布局方式”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！