浮動布局錯誤

kuangcaibao 發布于2019-08-30 14:16 / 3243人閱讀

摘要：可能因為圖片的尺寸剛好和的高度相同，所以布局并沒有什么問題，在等設備下面是沒有問題的但是發布之后，由于用戶的設備物理寬度是各種各樣的，這個時候問題來了，就會看見下面這奇奇怪怪的布局。。。

浮動

在開發中，很多布局總是在不經意間給人意外，下面這個例子，在瀏覽器調試界面是完全沒有問題的，包括移動端的適配，但是上線之后，發現問題真的好多
下面就記錄記錄，總結總結，反省反省

開始

代碼我就不貼了，畢竟真的都是特別基礎的，我還犯這種低級錯誤真的不應該啊，直接上圖

上面的界面，我分為三部分，1和2齊平，3在下面

錯誤寫法

下面的寫法是錯誤的，以后不能再犯了，改個小bug上傳一次服務器真的神煩，我都嫌棄我自己
起初是，1和2分別左浮動和右浮動，此時123是同級的，為父元素清除浮動之后，3自然排在下面。
可能因為圖片的尺寸剛好和2的高度相同，所以布局并沒有什么問題，在320px 375px 414px等設備下面是沒有問題的
但是發布之后，由于用戶的設備物理寬度是各種各樣的，這個時候問題來了，就會看見下面這奇奇怪怪的布局。。。
一首涼涼送給自己

解決方法

解決的方法超級簡單，給1和2一個父級，兩個浮動的元素和3互不影響，造成上面的原因就是因為1和2的高度不可能完全相等，所以浮動之后就會存在占位的問題
我想給自己翻個白眼，毫無技術可言，艸

GPU云服務器云服務器 html浮動向上浮動上下浮動左右浮動表頭浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115905.html

浮動布局錯誤

摘要：可能因為圖片的尺寸剛好和的高度相同，所以布局并沒有什么問題，在等設備下面是沒有問題的但是發布之后，由于用戶的設備物理寬度是各種各樣的，這個時候問題來了，就會看見下面這奇奇怪怪的布局。。。浮動在開發中，很多布局總是在不經意間給人意外，下面這個例子，在瀏覽器調試界面是完全沒有問題的，包括移動端的適配，但是上線之后，發現問題真的好多下面就記錄記錄，總結總結，反省反省開始代碼我就不貼了...

阿羅 2019-08-02 16:01 評論0 收藏0
css常見布局

摘要：圣杯布局對于三欄布局來說，左右兩欄一般放置目錄等簡要信息，中間一欄是主要信息。無論是三欄布局還是兩欄布局，以上方法都適用。純浮動布局左右兩欄分別向左右浮動，中間設置值，寬度自適應。圣杯布局對于三欄布局來說，左右兩欄一般放置目錄等簡要信息，中間一欄是主要信息。頁面加載時，用戶最希望第一時間看到的是中間一欄內容，所以根據文檔流加載順序（從上到下），中間一欄必須放在左右兩欄的前面。而實際...

douzifly 2019-08-30 13:18 評論0 收藏0
CSS布局 ——從display，position， float屬性談起

摘要：生成相對定位的元素，相對于元素本身正常位置進行定位。元素的位置通過以及屬性進行規定。因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過屬性控制疊放順序，越高，元素位置越靠上。頁面布局，或者是在頁面上做些小效果的時候經常會用到 display,position和float 屬性，如果對它們不是很了解的話，很容易出現一些莫名其妙的效果，痛定思痛讀了《CSS Maste...

hover_lew 2019-04-23 13:44 評論0 收藏0
css隨堂筆記（三）

摘要：隨堂筆記三關于背景圖片設置背景圖片圖片的路徑背景圖片位置方位名詞背景位置如果只設置一個方位詞，另外一個默認居中如果設置的值是兩個方位詞，與順序無關數值背景位置如果設置的值是數字一個值得時候，表示水平方向的位移，垂直方向默認居中兩個值得Css隨堂筆記（三） 1 關于背景圖片 ? A 設置背景圖片：background-image：url(圖片的路徑)； ? B 背景圖片位置： backgrou...

focusj 2019-04-23 13:26 評論0 收藏0
我腦中飄來飄去的css魔幻屬性

摘要：先來一張圖，看懂的幾個屬性順便帶上圖片出處，文章講得還可以，理解這張圖片，后面就好理解了。元素根據標簽的屬性決定顯示輸入框還是按鈕。還有，還有近來很火的。最近看到一篇20 個CSS高級技巧匯總的匯總，感觸很深，不過我想，與技巧相比，有些常見css布局難題，有時候更加讓我們的日常開發變得躊躇沮喪吧。在寫這一篇文章之前，自己還寫過一篇：我所不注意的那些CSS冷知識，但卻阻止了我做項目的速...

JouyPub 2019-08-29 14:02 評論0 收藏0