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

css 前端求解, display: inline-block 左右两个元素不对齐

  •  
  •   sunhk25 · 2015-03-10 16:39:47 +08:00 · 16014 次点击
    这是一个创建于 3547 天前的主题,其中的信息可能已经有所发展或是发生改变。
    17 条回复    2016-12-28 09:00:37 +08:00
    rayps
        1
    rayps  
       2015-03-10 17:20:04 +08:00
    .list-details .block-now, .list-details .block-next{
    /* display: inline-table; */
    float: left;
    }
    gangsta
        2
    gangsta  
       2015-03-10 17:24:32 +08:00
    第二个加float: left;
    NemoAlex
        3
    NemoAlex  
       2015-03-10 17:25:15 +08:00
    .list-details .block-now, .list-details .block-next {
    }
    NemoAlex
        4
    NemoAlex  
       2015-03-10 17:25:53 +08:00
    Sorry, 不小心提交了
    .list-details .block-now, .list-details .block-next {
    vertical-align: top;
    }
    wwwap
        5
    wwwap  
       2015-03-10 17:25:56 +08:00
    @mixin inline-block-fix($element) {
    font-size: 0;
    > #{$element} {
    display: inline-block;
    vertical-align: top;
    }
    }
    franciscowxp
        6
    franciscowxp  
       2015-03-10 17:26:41 +08:00
    .list-details .block-now, .list-details .block-next {
    vertical-align:middle;//add
    }
    romoo
        7
    romoo  
       2015-03-10 17:27:47 +08:00
    设置 vertical-align
    belin520
        8
    belin520  
       2015-03-10 17:32:27 +08:00
    设置 vertical-align ,就是设置表格的对齐方式

    那么多人回复了,哈哈
    loveuqian
        9
    loveuqian  
       2015-03-10 18:06:17 +08:00
    搭车求解为什么加了float left就对齐了
    breeswish
        10
    breeswish  
       2015-03-10 18:32:01 +08:00
    @loveuqian float:left 会导致其按照浮动布局来布局(display 不再 inline),和 inline-block 已经没有关系了
    写加 float:left 是相同结果的另一种途径,却不是楼主途径的正确修正
    loveuqian
        11
    loveuqian  
       2015-03-10 18:35:22 +08:00
    @breeswish 没看懂,感谢回答,新手学css的基础的几个难点估计就在float,position,display,
    b821025551b
        12
    b821025551b  
       2015-03-10 18:59:08 +08:00
    @loveuqian 反正float属性很恶心就是了,能不用,就不用。
    loveuqian
        13
    loveuqian  
       2015-03-10 21:19:13 +08:00
    @b821025551b 能不用就不用的话问一下最基本的两列布局的话,难道要用position嘛?
    sunhk25
        14
    sunhk25  
    OP
       2015-03-11 09:05:59 +08:00
    解决》》http://jsfiddle.net/mDdKr/404/
    /* float: left; */ /* 仅加这个也OK */
    /* vertical-align: top; */ /* 仅加这个也OK */
    vertical-align:middle; /* 仅加这个也OK,这个我最喜欢 */
    @rayps
    @gangsta
    @NemoAlex
    @wwwap
    @franciscowxp
    @romoo
    @belin520
    @loveuqian
    @breeswish
    @b821025551b
    谢谢各位
    juicy
        15
    juicy  
       2015-03-11 17:43:52 +08:00
    本来table布局中有些东西就非常不直觉化,一般能避免用table就不用table,楼主都用div了竟然还把它们硬生生地套用成table。。。用display:inline-block应该既能实现楼主的期望,同时由不会引入楼主遇到的问题。

    另外,我研究了一下规范,找到为什么会出现demo中的奇怪现象的原因了。

    详见博文 http://melon.github.io/blog/2015/03/11/a-quirk-table-case/
    sunhk25
        16
    sunhk25  
    OP
       2015-03-12 09:05:35 +08:00
    @juicy
    看了博文,又学习知识了。
    我最开始用的是inline-block ,但用inline-table还是比较上手。
    table会自动填满,居中容易,元素左右自动调节。
    tolerious
        17
    tolerious  
       2016-12-28 09:00:37 +08:00
    @wwwap 正解。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1097 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:23 · PVG 02:23 · LAX 10:23 · JFK 13:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.