V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hourui
V2EX  ›  程序员

请教一个前端的布局问题

  •  
  •   hourui ·
    cuber · 2014-04-15 16:47:36 +08:00 · 3487 次点击
    这是一个创建于 3869 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2014-04-15 17:43:33 +08:00
    经@P233指点已经找到正解
    第 2 条附言  ·  2014-04-15 20:20:36 +08:00
    @emric 提点,这是的确是一个BFC。
    顺便附送一个帖子
    http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
    22 条回复    1970-01-01 08:00:00 +08:00
    yushiro
        1
    yushiro  
       2014-04-15 16:51:22 +08:00
    参考: http://www.html5rocks.com/zh/tutorials/flexbox/quick/#toc-center
    弹性方框模型 (Flexible Box Model) 快速入门
    xiaomajia008
        2
    xiaomajia008  
       2014-04-15 16:57:07 +08:00
    哎,用js可以轻易实现...
    hourui
        3
    hourui  
    OP
       2014-04-15 16:59:03 +08:00
    @yushiro 如梦初醒,是时候该去补补CSS3的课了。每次都想着compat IE678,是时候往远看了。
    hourui
        4
    hourui  
    OP
       2014-04-15 17:00:15 +08:00
    @xiaomajia008 在布局上,我还是倾向于css,尽量避免用js去适应布局。
    zzNucker
        5
    zzNucker  
       2014-04-15 17:00:40 +08:00
    我也好想用flexbox啊。。。。。。 太蛋疼了。
    westup
        6
    westup  
       2014-04-15 17:02:08 +08:00
    腾讯那题啊,表示当时也卡在那里了,愧为老前端
    crs0910
        7
    crs0910  
       2014-04-15 17:04:52 +08:00
    外面 div 相对定位,里面两个 span 绝对定位,一个 left:0 ,一个 right:0 ,right那个加个background。
    hourui
        8
    hourui  
    OP
       2014-04-15 17:07:45 +08:00
    @crs0910 #left如果被#right盖住,视觉上会存在1/2或者1/4个汉字被盖住,看上去会异常诡异。
    romoo
        9
    romoo  
       2014-04-15 17:08:31 +08:00
    P233
        10
    P233  
       2014-04-15 17:09:27 +08:00
    这个不需要 flexbox ,更不用 js

    #right float:right;width:auto
    #left 不设定浮动,margin-right: auto

    注意,markup 里 #left 一定要在 #left 的前面
    P233
        11
    P233  
       2014-04-15 17:10:00 +08:00
    打错了,HTML #right 要在 #left 前面
    romoo
        12
    romoo  
       2014-04-15 17:10:41 +08:00
    我的方法需要将 #left 和 #right 的位置换一下。
    crs0910
        13
    crs0910  
       2014-04-15 17:20:57 +08:00
    @hourui 打个padding调整一下,不过我这种做法很丑陋,还是算了。
    hourui
        14
    hourui  
    OP
       2014-04-15 17:24:48 +08:00
    @crs0910 关键就是内容是什么也是未知,也许是中文英文混合...
    P233
        15
    P233  
       2014-04-15 17:31:43 +08:00
    hourui
        16
    hourui  
    OP
       2014-04-15 17:31:54 +08:00
    @P233
    无效啊...
    hourui
        17
    hourui  
    OP
       2014-04-15 17:34:48 +08:00
    @P233 你给的链接里面看是ok的,我再试试
    hourui
        18
    hourui  
    OP
       2014-04-15 17:40:31 +08:00
    @P233 赞一个,果然有效。浮动高级用法。
    P233
        19
    P233  
       2014-04-15 17:41:51 +08:00
    @hourui 截图里面 #left 继承了 inline-block,而且 markup 里有 whitespace 所以有 2px 的额外 margin

    在 markup 里 <span></span><span></span><span></span> 然后 display: inline-block 不会有间距问题

    但是如果
    <span></span>
    <span></span>
    <span></span>
    就有间距了
    hourui
        20
    hourui  
    OP
       2014-04-15 17:44:00 +08:00
    @P233 懂了!给你32个赞。
    emric
        21
    emric  
       2014-04-15 19:29:06 +08:00
    这不是又一个变样的 BFC ?
    hourui
        22
    hourui  
    OP
       2014-04-15 20:19:43 +08:00
    @emric 学习了一下BFC这个词。的确这是一个BFC
    看到个不错的帖子介绍BFC
    http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5521 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 07:01 · PVG 15:01 · LAX 23:01 · JFK 02:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.