一側定寬，一側自適應的頁面布局在現在用的很多，有哪些實現方式呢？

（個人總結，這個要看是左定右適。還是左適右定。視情況而定）

1, 左邊固定，右邊自適應：通過浮動和margin取正值來實現：

　　　　　　　　　　　　這里的原理是：margin-left：給左邊流出空間，來容納左浮動的元素；

定寬的元素為#sidebar

自適應的元素為#content

css代碼如下：

　　　　　給定寬的元素設置浮動

　　　　　　#sidebar{

　　　　　　　　　　float:left;

　　　　　　　　　　width:200px;? height:600px;

　　　　　　　　　　background-color:red;

　　　　　　　　　　}

　　　　　　自適應的元素呢？來給他設置margin-left吧，取值比上面那個元素的寬度大一些就好

　　　　　　#content{

　　　　　　　　　　width:100%; //如果是div塊級元素的話，width不設也可以

　　　　　　　　　　height:600px;

　　　　　　　　　　margin-left: 210px;

　　　　　　　　　　background-color:black;

　　　　　　　　　　}

?

?

2,左邊自適應，右邊固定：通過浮動和margin取負值來實現：

　　　　　　　　　　　　這里用到的原理是：margin-right取值為負值的時候，是把下一個元素往自己這邊拉過來；

定寬的元素為#sidebar

自適應的元素為#content

css代碼如下：

　　　#content{

　　　　　　float:left;

　　　　　　width:100%;

　　　　　　height:600px;

　　　　　　margin-right:-200px;

　　　　　　background-color:black;

　　　　}

　　#sidebar{

　　　　　　float:left;

　　　　　　width:200px;

　　　　　　height:600px;

　　　　　　background-color:red;

　　　　}

?

?3，用position，無論是上面哪種情況：

　　　基本思路是，外元素包含一個內元素：?

　　　　　　　　　　外元素的寬度設為100%，position：relative；?

　　　　　　　　　　內元素的寬度設為固定寬度，高度一致，若想左側定寬，left偏移量為0；若想右側定寬，right偏移量為0；

轉載于:https://www.cnblogs.com/better2019/p/8724536.html

總結

以上是生活随笔為你收集整理的【CSS】一侧定宽，另一侧自适应的布局该如何去做的全部內容，希望文章能夠幫你解決所遇到的問題。

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