V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
nikoo
V2EX  ›  问与答

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

  •  
  •   nikoo · 2018-10-04 10:33:57 +08:00 · 2067 次点击
    这是一个创建于 2003 天前的主题,其中的信息可能已经有所发展或是发生改变。
    例子: https://jsfiddle.net/89d627eh/ (可以左右拉动窗口宽度进行调试)

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

    有没有优雅的实现方案?

    ( 目前用很粗糙的实现方案: https://jsfiddle.net/xko4t3c7/
    9 条回复    2018-10-04 13:15:51 +08:00
    Biebe
        1
    Biebe  
       2018-10-04 10:46:49 +08:00 via iPhone   ❤️ 1
    flex order
    nikoo
        2
    nikoo  
    OP
       2018-10-04 11:01:07 +08:00
    @Biebe 谢谢,我搜索后参考 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order
    测试外套了一个.main 并且 .main {display: flex;}
    但这样只是横着排列,display: flex;没法让元素竖着拍
    nikoo
        3
    nikoo  
    OP
       2018-10-04 11:07:00 +08:00
    @Biebe 是我没认真看。。flex-direction: column; 可以实现

    很优雅,很牛皮!

    如果考虑老浏览器不支持 CSS3 的话还有什么兼容方案吗?
    rabbbit
        4
    rabbbit  
       2018-10-04 11:22:37 +08:00   ❤️ 2
    banricho
        5
    banricho  
       2018-10-04 11:27:51 +08:00   ❤️ 1
    order 需要一个个搞
    整体排序可以用 flex-direction

    需要兼容低版本浏览器的话,考虑直接 JS 吧...
    nikoo
        6
    nikoo  
    OP
       2018-10-04 11:36:53 +08:00
    @rabbbit 兄弟的方案真不错,支持低版本浏览器
    nikoo
        7
    nikoo  
    OP
       2018-10-04 11:38:00 +08:00
    @banricho 用 js 是怎么搞?先 remove 然后再把.title 元素 append 到.poster 后面吗?
    nikoo
        8
    nikoo  
    OP
       2018-10-04 11:47:01 +08:00
    @rabbbit 实际测试了一下,这个 .poster {margin-top:30px} 不太妥,.title 如果是动态高度呢?
    Hilong
        9
    Hilong  
       2018-10-04 13:15:51 +08:00 via Android
    @rabbbit 厉害👍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2861 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:29 · PVG 19:29 · LAX 04:29 · JFK 07:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.