1.固定部分(脫離文件流)+自適應部分(設定margin-left)
先看乙個float脫離文件流實現兩欄布局的寫法
固定寬度區
自適應區
float:left使得固定部分脫離文件流，自適應區上移，自適應區的div預設寬度為100%,設定margin-left後寬度變為100%-310px,空出左邊部分，因此只要用類似方法，把固定部分設定為脫離文件流就可以達到兩欄布局，脫離文件流的方法還有absolute,fix。
2.用display:table屬性（ie7以下不支援）
固定自適應
父元素的寬度設為100%，display:table;
子元素display:table-cell; left設定寬度，right不設定寬度，達到自適應效果
CSS布局 兩欄布局
題外話 心情不好想虐虐自己。兩欄布局要求說明 左側固定寬度，右側自適應大小 html文件結構如下 這是左邊 這是右邊 實現效果 方法如下 方法一 float。left將元素的float屬性設定為left body left right margin 0 padding 0 height 100 ba...
CSS實現 兩欄布局，三欄布局
aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...
CSS之兩欄布局
在頁面布局過程中，我們常常會要用到兩欄布局或者三欄布局，現在將兩欄布局的 總結如下 1.一邊寬度固定，一邊自適應 2.一邊寬度不固定，一邊自適應 方法一 左側float left 右側margin left html 左 右css demo demo left demo right 效果圖 方法二 ...