CSS - 在屏幕底部對齊div而不使用位置：絕對

我在設計PhoneJS應用程序，並且我需要在屏幕底部放置一個按鈕，但不使用position: absolute。CSS - 在屏幕底部對齊div而不使用位置：絕對

爲什麼我不使用絕對？

由於這是一個PhoneJS應用程序，該翻轉電話爲橫向時會導致問題（參見下文）

這是縱向（按鈕正確放置）

這是橫向（按鈕放錯地方）

ħ ow可以在不使用css屬性的情況下完成這樣的任務嗎？

來源

2015-08-28 Detilium

問題不在於位置。您需要製作媒體查詢以解決景觀問題。你唯一能解決這個問題的方法是絕對位置...... –

無論position: absolute是什麼，您仍然會遇到兩個按鈕並且沒有空間的問題。

我會建議使用媒體查詢來定位橫向並更改樣式。

/* iPhone Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

    /* Styles go here */ 

}

Media queries on CSS Tricks

來源

2015-08-28 11:59:13 Guy

由於這是一個PhoneJS，它是跨平臺的。這是否適用於Android和Windows Phone？在css中沒有像'if width> height'這樣的表達方式嗎？ – Detilium

我還沒有在windows phone上測試，因爲他們有這麼小的市場份額，但我會認爲'orientation：landscape'查詢也會在那裏觸發。對於Android手機，需要調整「像素比率」，「寬度」和「高度」查詢。請參閱我鏈接的文章以獲得更深入的瞭解。 – Guy

它支持在android中。謝謝你的答案。它完美的作品。我最終設計了它們，以便兩個按鈕不在彼此之下，但是它們彼此相鄰。欣賞它。 – Detilium

嘗試在此代碼中爲css使用@media標記。

來源

2015-08-28 11:58:31 rico

可以例如使用表的方法是這樣的。 http://jsfiddle.net/2232cyrq/

使height:100%爲body and html和主包裝將站在爲顯示：表和表芯的底部內容

來源

2015-08-28 12:04:22 Kumar

CSS - 在屏幕底部對齊div而不使用位置：絕對

回答

相關問題