Html 在响应式设计中将顶部元素移动到底部的最佳方法是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17115995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to move an element that's on the top to the bottom in Responsive design
提问by Suthan Bala
I have the following HTML format, what is the efficient way to position the given element on the top on a desktop and bottom on mobile devices (width < 640pixels)? Since there are lots of different devices, I don't want to write the position coordinates since the contents of the page's height varies. Any suggestions?
我有以下 HTML 格式，将给定元素定位在桌面顶部和移动设备底部（宽度 < 640 像素）的有效方法是什么？由于有很多不同的设备，我不想写位置坐标，因为页面高度的内容各不相同。有什么建议？
<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
回答by cimmanon
Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn't great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers dosupport it.
以响应方式重新排列未知高度的元素最好使用 Flexbox。虽然对桌面浏览器的支持不是很好（IE 是这里的主要限制因素，支持从 v10 开始），但大多数移动浏览器确实支持它。
http://cssdeck.com/labs/81csjw7x
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
http://caniuse.com/#feat=flexbox
Be aware that Flexbox can clash with other layout methods, such as the typical grid techniques. Flex items that are set to float can cause unexpected results in Webkit browsers using the 2009 specification (display: -webkit-box).
请注意 Flexbox 可能会与其他布局方法发生冲突，例如典型的网格技术。在使用 2009 规范 ( display: -webkit-box) 的Webkit 浏览器中，设置为浮动的 Flex 项目可能会导致意外结果。
回答by FelipeAls
Better compatibility than flexbox can be achieved with display: table-footer-group(IE8+)
Reverse effect: to move an element higher than it is in the HTML code, you can try table-captionand table-header-group.
使用display: table-footer-group(IE8+)可以实现比 flexbox 更好的兼容性
反向效果：将元素移动到高于 HTML 代码中的位置，您可以尝试table-caption和table-header-group。
Doesn't work with self-replaced elements like imgor input, at least on Chrome (and that's quite normal) but fine with divfor example.
不适用于像imgor 之类的自替换元素input，至少在 Chrome 上（这是很正常的），但div例如很好。
EDIT: it's 2016 so Flexbox (and Autoprefixer) all the things \o/
编辑：现在是 2016 年，所以 Flexbox（和 Autoprefixer）所有的东西\o/
回答by c.millasb
I don't know if it's the best approach, but you could replicate the same element where you want it and play with the display: none/display: inline-blockattribute. When it's viewed on desktop, your css tells it to display the one on top and not the one at the bottom. Then, when viewed on mobile, it should not display the one on top and display the one at the bottom.
我不知道这是否是最好的方法，但是您可以在需要的地方复制相同的元素并使用display: none/display: inline-block属性。当它在桌面上查看时，您的 css 会告诉它在顶部显示一个而不是在底部显示一个。然后，当在手机上查看时，它不应该显示顶部而显示底部。
Like I said, I'm not sure this is the most efficient way of doing it, but it does work. If anyone else has a better solution, I'd love to hear it.
就像我说的，我不确定这是最有效的方法，但它确实有效。如果其他人有更好的解决方案，我很乐意听到。
回答by Precastic
I assume when you say "postion" you mean so that it doesn't move when you scroll. In that case you could use:
我假设当您说“位置”时，您的意思是滚动时它不会移动。在这种情况下，您可以使用：
p.className {
position: fixed;
bottom: 0; // for mobile devices
top: 0; // for desktops
}
Where p element gets a class attribute like this:
其中 p 元素获得这样的类属性：
<p class="className">I am on the...</p>
bottom & top would not exist at the same time you would need to load the relevant one based on the device. For the desktop you would also need to offset your content with the height of the div so that it isn't hidden under the fixed div
底部和顶部不会同时存在，您需要根据设备加载相关的。对于桌面，您还需要用 div 的高度偏移您的内容，以便它不会隐藏在固定 div 下
