一、兩列布局：左邊固定寬度，右邊自適應寬度

方法1：浮動布局

采用的是左邊浮動，右邊加上一個margin-left值，讓他實現(xiàn)左邊固定，右邊自適應的布局效果

HTML:

CSS:

上面這種實現(xiàn)方法最關鍵之處就是自適應寬度一欄“div#content”的“margin-left”值要等于固定寬度一欄的寬度值，大家可以點擊查看上面代碼的DEMO

方法2：浮動和負邊距實現(xiàn)

這個方法采用的是浮動和負邊距來實現(xiàn)左邊固定寬度右邊自適應寬度的布局效果

HTML:

CSS:

二：等高布局(參見等高布局一文)

三：實現(xiàn)最小高度

上面的代碼就輕松的幫我們實現(xiàn)了跨瀏覽器的最小高度設置問題。這樣一來，我們可以交作業(yè)了，也完面了這個面試題的考試。為了讓大家更能形象的了解

總結

以上是生活随笔為你收集整理的CSS之左定宽度右自适应宽度并且等高布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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