一个比flexbox更大的浏览器支持的解决方案(适用于IE≥9):

#包装{ -webkit-transform:写入scaleY (1); -ms-transform:写入scaleY (1); 变换:写入scaleY (1); ｝ #包装> * { -webkit-transform:写入scaleY (1); -ms-transform:写入scaleY (1); 变换:写入scaleY (1); ｝ < div id = "包装" > < div id = " firstDiv " > 在这种情况下，内容在下面 < / div > < div id = " secondDiv " > 在这种情况下满足于上面 < / div > < / div > 其他元素

对比显示:表;解决方案当.wrapper有任意数量的子节点时，此解决方案有效。

或者为元素设置一个绝对位置，并通过从页面的边缘而不是对象的边缘声明页边距来去除页边距。使用%，因为它更适合其他屏幕尺寸等。这就是我如何克服这个问题的……谢谢，希望这是你想要的…

好吧，通过一些绝对的定位和一些狡猾的边缘设置，我可以接近，但它并不完美或漂亮:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

“margin-top: 4em”是特别讨厌的部分:这个边距需要根据firstDiv的内容量进行调整。根据你的具体要求，这是可能的，但我希望有人能在这个基础上建立一个固溶体。

Eric关于JavaScript的评论应该继续下去。

CSS唯一解决方案 1. 包装的高度应固定或 2. 第二个div的高度应该固定

如果你只使用css，你可以使用flex。

.price { 显示:flex; 对齐项目:中心; justify-content:中心; flex-direction: row-reverse;/ /恢复水平 / / flex-direction: column-reverse;恢复垂直 ｝ < div class = "价格" > < div >第一块< / div > 第二块< div > < / div > < / div >

如果您知道，或者可以强制将成为upper元素的大小，则可以使用

position : absolute;

在你的css中，给divs他们的位置。

否则javascript似乎是唯一的出路:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

或者类似的东西。

编辑:我刚刚发现这可能是有用的:w3文档css3移动到