HTML 响应式布局是否能优雅的调整元素上下位置？

This topic created in 2803 days ago, the information mentioned may be changed or developed.

例子： https://jsfiddle.net/89d627eh/ （可以左右拉动窗口宽度进行调试）

在该页面中，.title 的 div 写在.poster 上面
现在想在屏幕宽度<500p 时将.title 移动至.poster 下方

有没有优雅的实现方案？

（目前用很粗糙的实现方案： https://jsfiddle.net/xko4t3c7/ ）

Poster

HTML

title

div

9 replies • 2018-10-04 13:15:51 +08:00

Biebe

Oct 4, 2018 via iPhone

flex order

nikoo

Oct 4, 2018

@Biebe 谢谢，我搜索后参考 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order
测试外套了一个.main 并且 .main {display: flex;}
但这样只是横着排列，display: flex;没法让元素竖着拍

nikoo

Oct 4, 2018

@Biebe 是我没认真看。。flex-direction: column; 可以实现

很优雅，很牛皮！

如果考虑老浏览器不支持 CSS3 的话还有什么兼容方案吗？

rabbbit

Oct 4, 2018

banricho

Oct 4, 2018

order 需要一个个搞
整体排序可以用 flex-direction

需要兼容低版本浏览器的话，考虑直接 JS 吧...

nikoo

Oct 4, 2018

@rabbbit 兄弟的方案真不错，支持低版本浏览器

nikoo

Oct 4, 2018

@banricho 用 js 是怎么搞？先 remove 然后再把.title 元素 append 到.poster 后面吗？

nikoo

Oct 4, 2018

@rabbbit 实际测试了一下，这个 .poster {margin-top:30px} 不太妥，.title 如果是动态高度呢？

Hilong

Oct 4, 2018 via Android

@rabbbit 厉害👍