爲什麼我的底部div顯示不是以android爲中心，而是在顯示器上顯示？

我環顧四周，似乎無法找到問題的解決方案。爲什麼我的底部div顯示不是以android爲中心，而是在顯示器上顯示？

底部的兩個div如何在Windows 8上左右兩側完美切割，但是在我的android s5上，它並未居中？ http://danny4help.com/

#grad4_left img { 
    height: 100%; 
    width: 100%; 
    border-radius: 10px 0px 0px 10px; 
} 

#grad4_right { 
    z-index: inherit; 
    height: 700px; 
    background-color: #F1EEF7; 
    top: 705px; 
    width: 50%; 
    left: 50%; 
    text-align: center; 
    font-size: 80px; 
    line-height: 40px; 
    color: #4A4A4A; 
} 

.grad#grad4_left { 
    z-index: inherit; 
    height: 700px; 
    background-color: black; 
    top: 705px; 
    right: 50%; 
    color: #4A4A4A; 
    width: 50%; 
}

來源

2016-09-14 fungusanthrax

你所有的div都是絕對定位的。這將他們帶出文檔流程。 'body'元素沒有高度。我不會僅使用絕對定位的元素來構建佈局。首先，因爲這很可能是不必要的。其次，由於增加了複雜性。 –

但假設你想要走這條路線，至少我會添加'body {min-height：100vh;位置：相對; }'。這將使'body'元素至少與視口一樣高，併爲abspos div設置邊界。 –

@Michael_B我添加了你的改變 - 很多清潔器啓動！謝謝。 – fungusanthrax

你有幾個divs以像素具有固定的寬度，上方和下方的不正確的中心divs。這些divs比身體寬，因此視口會自動展開以顯示這些元素的整個寬度，使您看起來好像您的divs不正確居中。只需將width的width的像素單位替換爲任意百分比的視口單位，您就可以很好地使用（例如，.grad的寬度爲1280px。將其更改爲100vw）。對於一個快速和骯髒的修復，此塊添加到頂部：

* { 
    max-width: 100vw; 
    }

編輯：一些其他的答案，建議您不要在響應佈局中使用絕對定位。只要使用相對單位（例如，%，em,vw）而非固定單位（例如，px,in,pt），使用position: absolute實際上是確定的。

來源

2016-09-14 01:36:47 theEpsilon

其實它已經集中在手機中。您看到它不對齊中心的原因是因爲您已將網格div設置爲width: 1280px，而正文元素僅爲100%。還有@Michael_B提到的，除了沒有height之外，它不能在你的body元素中獲得你的元素的width。我建議你不要僅使用position: absolute元素來構建佈局，因爲它對於響應式佈局會更好，並且我假設您的目標是移動。

無論如何，下面是我可以向你推薦的一些修補程序。

html, body添加width 100%

.grad刪除width

.grad1刪除height

.grad#grad1 img添加max-width to 100%，加display: block

#shade刪除position: absolute，刪除width

#grad1.grad #scrolling_text變化width 100%

#block_text刪除width

#nested_skills變化font-size: 16px讓您grad3 div可以把你的文本的寬度

.grad#grad4_right添加overflow-y: scroll。如果您不想讓滾動條設置爲height: auto，但它將與左側的圖像不同height。另外它不會顯示左邊div的左邊距以及右邊div的右邊距，因爲您使用的是絕對值。

.grad#grad5：你必須要對此進行調節字體大小自己

.grad#grad6添加left: 0; right: 0; margin: 0 auto

.grad#grad7添加display: block

這應該是不錯的。

來源

2016-09-15 03:06:20 Dr3am3rz

爲什麼我的底部div顯示不是以android爲中心，而是在顯示器上顯示？

回答

相關問題