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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、贛州網(wǎng)站維護(hù)、網(wǎng)站推廣。

一.浮動(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)

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()計(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布局

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如何實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)的布局方式”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：css如何實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)的布局方式
文章分享：http://chinadenli.net/article18/ggjegp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站營銷、標(biāo)簽優(yōu)化、ChatGPT、網(wǎng)站排名、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)