Question

我想知道什么是移动响应页面的某些元素的最佳解决方案，该页面显示在实时网站的页脚中，仅在源代码中位于顶部。

就像这个站点在源代码中的body标签之后有h1 seo-block，但是在实时网站上，这个内容显示在底部。他们使用绝对定位来解决这个问题。

#subfooter{
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}

我的问题是如何才能在响应式设计上做到这一点，因为除非我们只为这个类使用大量的@media查询，否则绝对定位在那里效果不佳。还有其他更好的css / js / jquery解决方案吗？

Answer 1

单靠CSS不能这样做。您需要使用JavaScript移动相关部分。

jQuery示例：

jQuery( 'body' ).append( jQuery( '#subfooter' ) );

Answer 2

如果您愿意使用（当前）limited browser support，则可以使用the flexible box layout module来实现此目的。

（live demo）

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flexbox</title>
<style>
  body { 
    display: flex; 
    flex-direction: column;
  }
  #source-top {
    order: 2;
  }
  #source-bottom {
    order: 1;
  }
</style>  
</head>
<body>
  <div id="source-top">Source top</div>
  <div id="source-bottom">Source bottom</div>
</body>
</html>

仅在响应式网站上移动源代码中的元素

2 个答案: