12

我有以下 HTML 格式，将给定元素放置在桌面顶部和移动设备底部（宽度 < 640 像素）的有效方法是什么？由于有很多不同的设备，我不想写位置坐标，因为页面高度的内容会有所不同。有什么建议么？

<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
4

4 回答 4

24

以响应方式重新排序未知高度的元素最好使用 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 可能会与其他布局方法发生冲突，例如典型的网格技术。display: -webkit-box设置为浮动的 Flex 项目可能会在使用 2009 规范 ( )的 Webkit 浏览器中导致意外结果。

于 2013-06-14T20:27:18.547 回答
5

display: table-footer-group使用(IE8+)可以实现比 flexbox 更好的兼容性
反向效果：要将元素移动到高于 HTML 代码中的位置，您可以尝试table-caption和table-header-group.

不适用于像imgor这样的自我替换元素input，至少在 Chrome 上（这很正常），但div例如可以使用。

编辑：它是 2016 年所以 Flexbox（和 Autoprefixer）所有的东西\o/

于 2013-06-14T22:31:30.853 回答
1

我不知道这是否是最好的方法，但你可以复制你想要的相同元素并使用display: none/display: inline-block属性。当它在桌面上查看时，您的 css 会告诉它在顶部显示一个，而不是在底部显示一个。然后，当在移动设备上查看时，它不应该在顶部显示一个而在底部显示一个。

就像我说的那样，我不确定这是最有效的方法，但它确实有效。如果其他人有更好的解决方案，我很想听听。

于 2013-06-14T19:39:44.430 回答
0

我假设当您说“位置”时，您的意思是当您滚动时它不会移动。在这种情况下，您可以使用：

p.className {
  position: fixed;
  bottom: 0; // for mobile devices
  top: 0; // for desktops
}

其中 p 元素获取如下类属性：

<p class="className">I am on the...</p>

底部和顶部不会同时存在，您需要根据设备加载相关的。对于桌面，您还需要使用 div 的高度来偏移您的内容，以便它不会隐藏在固定 div 下

于 2013-06-14T19:43:40.763 回答