摘要:可能因?yàn)閳D片的尺寸剛好和的高度相同,所以布局并沒有什么問題,在等設(shè)備下面是沒有問題的但是發(fā)布之后,由于用戶的設(shè)備物理寬度是各種各樣的,這個(gè)時(shí)候問題來了,就會(huì)看見下面這奇奇怪怪的布局。。。
浮動(dòng)
在開發(fā)中,很多布局總是在不經(jīng)意間給人意外,下面這個(gè)例子,在瀏覽器調(diào)試界面是完全沒有問題的,包括移動(dòng)端的適配,但是上線之后,發(fā)現(xiàn)問題真的好多
下面就記錄記錄,總結(jié)總結(jié),反省反省
代碼我就不貼了,畢竟真的都是特別基礎(chǔ)的,我還犯這種低級(jí)錯(cuò)誤真的不應(yīng)該啊,直接上圖
上面的界面,我分為三部分,1和2齊平,3在下面
下面的寫法是錯(cuò)誤的,以后不能再犯了,改個(gè)小bug上傳一次服務(wù)器真的神煩,我都嫌棄我自己
起初是,1和2分別左浮動(dòng)和右浮動(dòng),此時(shí)123是同級(jí)的,為父元素清除浮動(dòng)之后,3自然排在下面。
可能因?yàn)閳D片的尺寸剛好和2的高度相同,所以布局并沒有什么問題,在320px 375px 414px等設(shè)備下面是沒有問題的
但是發(fā)布之后,由于用戶的設(shè)備物理寬度是各種各樣的,這個(gè)時(shí)候問題來了,就會(huì)看見下面這奇奇怪怪的布局。。。
一首涼涼送給自己
解決的方法超級(jí)簡單,給1和2一個(gè)父級(jí),兩個(gè)浮動(dòng)的元素和3互不影響,造成上面的原因就是因?yàn)?和2的高度不可能完全相等,所以浮動(dòng)之后就會(huì)存在占位的問題
我想給自己翻個(gè)白眼,毫無技術(shù)可言,艸
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/54537.html
摘要:可能因?yàn)閳D片的尺寸剛好和的高度相同,所以布局并沒有什么問題,在等設(shè)備下面是沒有問題的但是發(fā)布之后,由于用戶的設(shè)備物理寬度是各種各樣的,這個(gè)時(shí)候問題來了,就會(huì)看見下面這奇奇怪怪的布局。。。 浮動(dòng) 在開發(fā)中,很多布局總是在不經(jīng)意間給人意外,下面這個(gè)例子,在瀏覽器調(diào)試界面是完全沒有問題的,包括移動(dòng)端的適配,但是上線之后,發(fā)現(xiàn)問題真的好多下面就記錄記錄,總結(jié)總結(jié),反省反省 開始 代碼我就不貼了...
摘要:生成相對(duì)定位的元素,相對(duì)于元素本身正常位置進(jìn)行定位。元素的位置通過以及屬性進(jìn)行規(guī)定。因?yàn)榻^對(duì)定位與文檔流無關(guān),所以絕對(duì)定位的元素可以覆蓋頁面上的其他元素,可以通過屬性控制疊放順序,越高,元素位置越靠上。頁面布局,或者是在頁面上做些小效果的時(shí)候經(jīng)常會(huì)用到 display,position和float 屬性,如果對(duì)它們不是很了解的話,很容易出現(xiàn)一些莫名其妙的效果,痛定思痛讀了《CSS Maste...
摘要:隨堂筆記三關(guān)于背景圖片設(shè)置背景圖片圖片的路徑背景圖片位置方位名詞背景位置如果只設(shè)置一個(gè)方位詞,另外一個(gè)默認(rèn)居中如果設(shè)置的值是兩個(gè)方位詞,與順序無關(guān)數(shù)值背景位置如果設(shè)置的值是數(shù)字一個(gè)值得時(shí)候,表示水平方向的位移,垂直方向默認(rèn)居中兩個(gè)值得Css隨堂筆記(三) 1 關(guān)于背景圖片 ? A 設(shè)置背景圖片:background-image:url(圖片的路徑); ? B 背景圖片位置: backgrou...
摘要:先來一張圖,看懂的幾個(gè)屬性順便帶上圖片出處,文章講得還可以,理解這張圖片,后面就好理解了。元素根據(jù)標(biāo)簽的屬性決定顯示輸入框還是按鈕。還有,還有近來很火的。 最近看到一篇20 個(gè)CSS高級(jí)技巧匯總的匯總,感觸很深,不過我想,與技巧相比,有些常見css布局難題,有時(shí)候更加讓我們的日常開發(fā)變得躊躇沮喪吧。在寫這一篇文章之前,自己還寫過一篇:我所不注意的那些CSS冷知識(shí),但卻阻止了我做項(xiàng)目的速...
閱讀 3226·2021-11-22 15:25
閱讀 3951·2021-11-17 09:33
閱讀 3436·2021-11-08 13:15
閱讀 3122·2021-09-22 10:56
閱讀 629·2021-08-31 09:45
閱讀 2821·2019-08-30 13:49
閱讀 3135·2019-08-30 12:52
閱讀 1210·2019-08-29 17:05