V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fushall
V2EX  ›  前端开发

豆瓣的手机版网站,中心的<div class="page"...是怎么实现的

  •  
  •   fushall · 2018-01-21 23:18:36 +08:00 · 2730 次点击
    这是一个创建于 2505 天前的主题,其中的信息可能已经有所发展或是发生改变。

    豆瓣手机版,m.douban.com
    中间的内容区域,是<div class="page"
    具体效果如下:
    1.页面大于 650px 的时候,内容是居中的,两端有多余的空白
    2.随着浏览器的缩小,两端的空白越来越小,这时候内容依旧是居中的
    3.继续缩小,当两端空白消失,页面会随着浏览器的缩小,自动调节内容

    1 和 2 不知道具体是怎么实现的,3 的话,Bootstrap 可以很容易实现

    请教大家,1 和 2 是怎么实现的,感觉这样做出来的网站挺好看

    原谅我的这个愚蠢的提问,我甚至不知道怎么描述这个问题

    5 条回复    2018-01-21 23:54:55 +08:00
    shenyu1996
        1
    shenyu1996  
       2018-01-21 23:24:21 +08:00 via Android   ❤️ 1
    margin: auto?
    iNaru
        2
    iNaru  
       2018-01-21 23:26:19 +08:00   ❤️ 1
    最经典的块级元素 margin:0 auto; 居中吧 max-width 限制最大宽度。
    lhx2008
        3
    lhx2008  
       2018-01-21 23:36:23 +08:00 via Android   ❤️ 1
    没去翻源代码,不过我猜肯定是媒体查询,不同浏览器宽度代码是不同的
    fushall
        4
    fushall  
    OP
       2018-01-21 23:41:16 +08:00
    谢谢大家的帮助,果然实现了这个效果,附上简单的代码:
    <div class="container-fluid">
    <div class=row style="max-width:650px; margin: 0 auto;">
    <div class="rol" style="border: solid 1px red;></div>
    <div class="rol-8" style="border: solid 1px red; height:100px></div>
    <div class="rol" style="border: solid 1px red;></div>
    </div>
    </div>
    sneezry
        5
    sneezry  
       2018-01-21 23:54:55 +08:00   ❤️ 2
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   934 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:42 · PVG 04:42 · LAX 12:42 · JFK 15:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.