CSS-在屏幕底部对齐div,不使用位置:绝对
我正在设计一个PhoneJS应用程序,我需要在屏幕底部放置一个按钮,但不能使用position: absolute
。
为什么不只使用绝对?
由于这是PhoneJS应用程序,因此在将手机翻转到横向位置时会出现问题(请参阅下面的内容)
这是纵向(按钮放置正确)
这是横向(按钮放错地方)
不使用position: absolute
CSS属性如何完成此类任务?
解决方案
不管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
相关文章