CSS-在屏幕底部对齐div，不使用位置：绝对 [英] CSS - Align div in bottom of screen without using position: absolute

问题描述

我正在设计一个PhoneJS应用程序，我需要在屏幕底部放置一个按钮，但不能使用position: absolute。

为什么不只使用绝对？

由于这是PhoneJS应用程序，因此在将手机翻转到横向位置时会出现问题(请参阅下面的内容)

这是纵向(按钮放置正确)

这是横向(按钮放错地方)

不使用position: absoluteCSS属性如何完成此类任务？

推荐答案

不管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

这篇关于CSS-在屏幕底部对齐div，不使用位置：绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！