一、兩列布局：左邊固定寬度，右邊自適應(yīng)寬度

方法1：浮動(dòng)布局

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

HTML:

CSS:

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

方法2：浮動(dòng)和負(fù)邊距實(shí)現(xiàn)

這個(gè)方法采用的是浮動(dòng)和負(fù)邊距來實(shí)現(xiàn)左邊固定寬度右邊自適應(yīng)寬度的布局效果

HTML:

CSS:

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。