使用 CSS 以完全流畅的布局使一个 div 显示在另一个 div 下

我已经更新了我的代码并制作了一个小提琴来解释我正在尝试做的事情。我之前也有过类似的问题，但并没有体现出模板的流动性。

我有一个完全流畅的布局我需要让一个div显示在另一个div下面.

我想用 CSS 来实现，但我不想使用 javascript 或 jquery。

这是小提琴：http://jsfiddle.net/sexywebteacher/7hCNC/20/ http://jsfiddle.net/sexywebteacher/7hCNC/20/

我可能不清楚：我正在谈论小提琴中的第 1 节和第 2 节 div

你认为这可以做到吗？

谢谢你！

如果图像和文本的高度都是可变的，那么使用纯 CSS 就不是特别容易。

高度可变排除了任何基于position: absolute，如您收到的答复中所示你之前的类似问题 https://stackoverflow.com/questions/10412896/move-the-first-div-appear-under-the-second-one-in-css.

一种选择是使用此处所示的技术：http://tanalin.com/en/articles/css-block-order/ http://tanalin.com/en/articles/css-block-order/

可以使用以下命令更改 HTML 页面上块的垂直顺序 使用 display: table family 属性的 CSS 表格呈现。 关于 HTML 代码中的块顺序，标头 (table-header-group） 的 这样的表格显示在其顶部，页脚（display: table-footer-group)—位于底部和桌体 （table-row-group)—页眉和页脚之间。

这适用于所有现代浏览器，如果您小心的话，还可以使用 IE8。它does not在 IE6/7 下工作。

这是使用此技术的代码：http://jsfiddle.net/thirtydot/7hCNC/35/ http://jsfiddle.net/thirtydot/7hCNC/35/

我必须承认，我从未在生产网站上使用过这种技术，所以请彻底测试。

一种不同的方法将在所有支持 CSS3 2D 转换的浏览器 http://caniuse.com/transforms2d就是垂直翻转整个容器，然后对“图像”和“文本”元素执行相同的操作。在不支持 CSS3 转换的浏览器中，一切仍然有效，但“图像”和“文本”元素将按其原始顺序排列。换句话说，它可以很好地降解。可能可以在 IE6-8 中使用filter，但这会使文本看起来很糟糕，所以忘记它吧。

这是使用此技术的代码：http://jsfiddle.net/thirtydot/7hCNC/36/ http://jsfiddle.net/thirtydot/7hCNC/36/

如果这些 CSS 方法都不够好，您就必须使用 JavaScript。

不过，我个人建议你只切换 HTML 中的顺序 http://jsfiddle.net/thirtydot/7hCNC/37/。我怀疑谷歌关心about it https://stackoverflow.com/questions/10412896/move-the-first-div-appear-under-the-second-one-in-css#comment13434314_10412896。在这种情况下，我真的怀疑竭尽全力让 HTML 保持“最佳顺序”是否会产生任何有意义的 SEO 影响。