CSS-在屏幕底部对齐div,不使用位置:绝对

2022-03-17 00:00:00 css css-position phonejs

我正在设计一个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

相关文章