左側固定 右側自適應

左側浮動，右側margin-left值為左側寬即可。

由於左側浮動，左側盒子脫標，右側仍在標準文件流，右側盒子寬度是剩下的寬度，效果為右側自適應。

右側內容可居中，常規用法即可。

需注意的是左側浮動，右側不能繼續浮動。

如果兩邊盒子都浮動，由於右側盒子寬度不固定，預設為內容撐開寬度。

若浮動，極有可能在第二排，如果想要把右側內容居中，實現十分困難。

在@普通男孩 的提示下發現示例沒給全，下面給出示例詳細實現

1

<
body 
class
="clearfix"
>
2<
div 
class
="left"
>
3我是左側內容
4div
>
5<
div 
class
="right"
>
6我是右側標準流內容
7<
div 
class
="cont"
>
8我是右側居中內容
9div
>
10div
>
11body
>

1

左側寬度固定，右側寬度自適應

實現左側寬度固定，右側寬度自適應的布局有很多，這裡介紹幾種方式 方式一 左側盒子寬度設定為100畫素，並且設定為左浮動，右側的盒子不設定寬度，只是設定個margin left值就可以了，如下 左側右側 但是以上辦法，如果設定為右側，固定左側自適應的布局是不可以的，如果想實現這樣的布局可以設定把兩個盒...

網頁布局 左側固定，右側自適應

第一種方法 採用絕對定位 bfc overflow auto doctype html html lang en head meta charset utf 8 title document title style left right style head body div class left ...

html布局,左側固定右側自適應

前幾天看到我們的ui稿，要實現左側固定樹結構，右側自適應。想著自己寫過幾次但是每次都會忘記，在這裡做個筆記。第一種方法 doctype html html lang en head meta charset utf 8 title title title script src script styl...