今天看到了這樣一道題
用兩種不同的方法來實現乙個兩列布局,其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化
自己感覺有好幾種方法,再此總結下:
一、使用position:absolute方法,因為把元素設定為absolute,那元素就脫離了文件流,後面的元素就會佔據他原來的位置:
>無標題文件
二、使用float方法
>無標題文件
title
>
head
>
<
style
type
="text/css"
>
.side
.exta
//不能新增float:left;否則其寬度就會隨內容變窄,不是隨瀏覽器變化了
style
>
<
body
>
<
div
class
="pd"
>
<
div
class
="side"
>side
div>
<
div
class
="exta"
>exta
div>
div>
body
>
html
>
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁,要求右側寬度為200px,左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...
兩列布局 三列適應布局 兩列等高適應布局。
一.兩列布局 左側定寬 右側自適應。四種方法 flex position float和負外邊距 外邊距 1.使用flex.右側自適應區塊 左側定寬200px區塊 2.使用position,考慮了頁面優化,右側區域先載入。右側自適應區塊 左側定寬200px區塊 3.利用float和負外邊距 這裡的10...
頁面布局 兩列布局
left right right css left right簡單的布局方法,左側設定浮動,右側設定margin left 避免環繞左側 的布局方法 left right right css left right fix right通過在html檔案的right上套上一層right fix,然後對r...