固定右欄寬度, 左欄內容先出現同時自適應寬度的布局

2021-09-30 10:41:01 字數 312 閱讀 6338

#left定義100%寬度並利用margin:0 0 0 -200px把左邊整塊放在偏移入左邊200px處,再利用#innerleft的margin:0 0 0 200px再把內容撐出來,

#right只是簡單的浮動,#innerright公尺多大作用,只是習慣性保留著,除了可以讓我們的控制更簡單點,還可以為下次改變布局可保持結構不變。

除了可以固定右邊也可以固定左邊,有空的朋友可以嘗試一下

這只是個簡單的例子,希望對初學css布局的朋友有幫助。

工作原理

除了可以固定右邊也可以固定左邊,有空的朋友可以嘗試一下

**:

右欄固定,左欄自適應寬度且先出現的一種實現方案

經過一番終極搜尋,終於找到了滿意的解決方案 看罷,不禁替他拍案叫絕,這個思路真的是非常妙 將乙個div的寬度設為100 然後設定其margin left為負值 比如 200px 這樣就將整個往左移動了一段距離,所以這個div裡邊的內容有一部分是看不到的。不過沒關係,接下來在這個div裡邊再嵌入乙個d...

實現側欄固定寬度,內容欄寬度自適應

常用側欄固定寬度,內容欄的寬度自適應,在不同的解析度下實現寬度自適應。下面是我根據工作實踐總結的一些實現方法的demo。方法一 固定寬度區浮動 float,自適應區寬度自適應設定 margin html結構 class content class slider href 導航1a li href 導...

CSS布局中左(右)寬度自適應,右(左)寬度固定

設定左側寬度為200px,向左浮動 設定右側margin right,為左側盒子寬度 header content left content right footer class header logo div class content class left 固定寬度div class right...