一.浮動布局

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的負值(3個div)

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

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

給包裹內容的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. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> ```

</div>

三.calc()計算屬性

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

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

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

``` .aside{ float: left; width: 200px; background-color: red; } .content{ calc:(100% - 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> ```

四.flex布局

需要給父級div設置display: flex屬性。

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

內容區域的div直接寫出flex: 1即可。

``` .container{ display: flex; } .aside{ flex: 0 0 200px; background-color: red; } .content{ flex: 1; background-color: blue; } <div class="container"> <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> </div> ```

五.左側浮動，右側overflow:hidden

.aside{width: 200px;float: left;background-color: red; } .content{overflow: hidden;background-color: blue; } &lt;div class="aside"&gt;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.&lt;/div&gt;&lt;div class="content"&gt;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.&lt;/div&gt;

阮一峰老師寫的教程權威傳送門：http://www.ruanyifeng.com/blo...

原文地址：https://segmentfault.com/a/1190000016694777

轉載于:https://www.cnblogs.com/lalalagq/p/9809085.html

總結

以上是生活随笔為你收集整理的左侧固定，右侧自适应的布局方式(新增评论区大佬教的方法）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。