CSS float 定位和縮放問題

2022-01-13 02:38:35 字數 1229 閱讀 6307

今天除錯乙個看起來很簡單的前端問題,但卻花了太多的時間,示例**:

狀態標題瀏覽量

發布時間

操作

已發布田園裡的蟋蟀

02016-03-17 15:26

修改 刪除

已發布田園裡的蟋蟀

02016-03-17 15:26

修改 刪除

效果:

上面是我們一般設計後台使用的**和樣式,左邊是選單區域,右邊是內容操作區域,但左邊選單區域因為解析度或視窗大小進行了縮放,也就是選單變形了,現在要求左邊選單固定寬度不拉伸,右邊內容操作區域可以進行縮放,所以,我們改了下面的**:

狀態標題瀏覽量

發布時間

操作

已發布田園裡的蟋蟀

02016-03-17 15:26

修改 刪除

已發布田園裡的蟋蟀

02016-03-17 15:26

修改 刪除

效果:

這個我花了很多時間進行調整,不是**寬度超過內容區域,就是寬度不夠,某個介面下調整了,但伸縮下介面,寬度又亂了,後來無意間調整了一下樣式,就可以了,**如下:

狀態標題瀏覽量

發布時間

操作

已發布田園裡的蟋蟀

02016-03-17 15:26

修改 刪除

已發布田園裡的蟋蟀

02016-03-17 15:26

修改 刪除

主要改進是在右側內容區域增加margin-left:144px樣式,並且寬度要和選單區域的寬度一致,縮放效果:

CSS float相容問題

塊元素同行顯示 換行不解析 不設定內容寬高撐開 寬高padding支援 碰到父級或者有float的元素停止 可以設定屬性為left right,none 一 要讓元素同行顯示,給所有的同行元素加float,不然在ie67下面會有3px的間距 二 ie6下面,塊元素有浮動且有左右margin的時候,會...

css float遇到的問題

float的一些問題 前面的元素使用float時,會和後乙個元素水平對齊,這時候可以在後乙個元素css中加clear both left right 意思就是該元素不允許兩邊 左邊 右邊有浮動元素。詳情可以自己去查。然後後乙個元素會頂在前乙個元素後面,就無論後乙個元素margin top多少或者pa...

CSS float(浮動)和清除浮動

float元素也稱為浮動元素,設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。簡單來說,就是讓block元素無視float元素,讓inline元素讓流水一樣圍繞著float元素來實現浮動布局。1 背景不能...