我会跳到一个例子。
<!DOCTYPE html>
<head>
<title>Transposing div using CSS</title>
<style>
div#wrapper {
}
div#menu {
border:blue solid 1px;
}
div#main {
border:red solid 1px;
}
</style>
</head>
<body>
<p>How do we show the menu div immediately after the content div?</p>
<div id="wrapper">
<div id="menu">Menu</div>
<div id="main">Content</div>
</div>
</body>
</html>
在浏览器中，菜单 div 将首先出现在流程中。现在假设我需要更改布局，以便“菜单”跟随内容 div 内容。如何仅使用 CSS 来完成此操作。这意味着不会更改 HTML(没有用户代理检测内容)，也没有 JavaScript 代码。
定位元素的主要 CSS 技术是使用 float:right|left 属性。相对于它们的边界框移动元素效果很好，但我正在考虑在正常流程中移动其后继元素末尾的元素。
这是用例。我希望网站在小屏幕浏览器(如 iPhone)上以最佳方式显示。该网站目前的菜单位于顶部，内容位于下方，这是一种非常常见的布局，但在 iPhone 上，实际空间非常有限，因此最好将菜单置于主要文本内容之后。
该解决方案仅适用于 iPhone 和 Android 手机(基于 WebKit)。所以不需要考虑 Internet Explorer黑客等。
最佳答案
如果您的菜单具有固定高度(这很可能是这样)，您可以使用与粘性页脚相同的原则:在 wrapper 上应用相对位置，以及与菜单高度相同的底部填充。在代码中:
div#wrapper {
height: 100%;
padding-bottom: 100px;
position: relative;
}
div#menu {
border:blue solid 1px;
position: absolute;
bottom: -2px; /*to offset the border pxs*/
height: 100px;
width: 100%;
}
div#main {
border:red solid 1px;
}
您可以在此处查看实际效果:http://jsfiddle.net/3ZheQ/
关于html - 使用 CSS 转置 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5353134/