我有以下
HTML格式,将给定元素放置在桌面顶部,移动设备底部(宽度< 640pxels)上的有效方式是什么？由于有很多不同的设备,我不想写入位置坐标,因为页面高度的内容有所不同.有什么建议么？
<html> <head> .. </head> <body> .. <p>I am on the top of desktop page,and bottom of mobile page</p> ... </body> </html>
解决方法
以灵活的方式重新排列未知高度的元素最好用FlexBox完成.虽然支持不是桌面浏览器(IE是这里的主要限制因素,支持从v10开始),大多数移动浏览器确实支持它.
http://cssdeck.com/labs/81csjw7x
@media (max-width: 30em) {
.container {
display: -webkit-Box;
display: -moz-Box;
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
-webkit-Box-orient: vertical;
-moz-Box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-Box-align: start;
-moz-Box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first {
-webkit-Box-ordinal-group: 2;
-moz-Box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
http://caniuse.com/#feat=flexbox
请注意,FlexBox可能会与其他布局方法冲突,例如典型的网格技术.设置为浮动的Flex项目可能会导致使用2009年规范(显示：-webkit-Box)的Webkit浏览器中出现意想不到的结果.
