css回顧之左側寬度自適應布局

2022-02-14 11:16:20 字數 354 閱讀 8294

![螢幕快照 2018-03-13 上午11.36.06](螢幕快照 2018-03-13 上午11.36.06.png)

content - 自適應寬度

aside - 定寬200px

第一步:兩個div設定固定高度右邊的設定固定寬度,並且都float:left;

第二步:右邊的div設定固margin-right,讓它能和左邊的div併排顯示;

第三步:在左邊的div中再新增乙個小div#real,由它來撐開div#left 設定margin-right,值為div#right的寬

css布局之左側固定右側自適應布局

1.固定高度 左側固定 右側欄自適應寬度 title style type text css mainbody leftcol rightcol style head body divid mainbody divid leftcol div divid rightcol div div body ...

左側固定寬度,右側自適應寬度的CSS布局

第一種方法 關於這個布局,作者是這樣說明的 left和right都貼住左側。設定left在right上面 z index 在right內加個放內容的層 content 設定content距離right的左側為200px,即剛巧等於left的寬度。這個布局有乙個缺點就是,如果我設定了foot的div,...

css頁面布局之左側定寬,右側自適應

二列布局的特徵是側欄固定寬度,主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度,中間列自適應寬度。之所以將二列布局和三列布局寫在一起,是因為二列布局可以看做去掉乙個側欄的三列布局,其布局的思想有異曲同工之妙。對於傳統的實現方法,主要討論上圖中前三種布局,經典的帶有側欄的二欄布局以及帶有左右側欄的三欄...