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

[sunhk25]

在线demo>>>
http://jsfiddle.net/mDdKr/399/

[rayps]

.list-details .block-now, .list-details .block-next{
/* display: inline-table; */
float: left;
}

[gangsta]

第二个加float: left;

[NemoAlex]

.list-details .block-now, .list-details .block-next {
}

[NemoAlex]

Sorry, 不小心提交了
.list-details .block-now, .list-details .block-next {
vertical-align: top;
}

[wwwap]

@mixin inline-block-fix($element) {
font-size: 0;
> #{$element} {
display: inline-block;
vertical-align: top;
}
}

[franciscowxp]

.list-details .block-now, .list-details .block-next {
vertical-align:middle;//add
}

[romoo]

设置 vertical-align

[belin520]

设置 vertical-align ，就是设置表格的对齐方式

那么多人回复了，哈哈

[loveuqian]

搭车求解为什么加了float left就对齐了

[breeswish]

@loveuqian float:left 会导致其按照浮动布局来布局（display 不再 inline），和 inline-block 已经没有关系了
写加 float:left 是相同结果的另一种途径，却不是楼主途径的正确修正

[loveuqian]

@breeswish 没看懂，感谢回答，新手学css的基础的几个难点估计就在float，position，display，

[b821025551b]

@loveuqian 反正float属性很恶心就是了，能不用，就不用。

[loveuqian]

@b821025551b 能不用就不用的话问一下最基本的两列布局的话，难道要用position嘛？

[sunhk25]

解决》》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]

本来table布局中有些东西就非常不直觉化，一般能避免用table就不用table，楼主都用div了竟然还把它们硬生生地套用成table。。。用display:inline-block应该既能实现楼主的期望，同时由不会引入楼主遇到的问题。

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

详见博文 http://melon.github.io/blog/2015/03/11/a-quirk-table-case/

[sunhk25]

@juicy
看了博文，又学习知识了。
我最开始用的是inline-block ，但用inline-table还是比较上手。
table会自动填满，居中容易，元素左右自动调节。

[tolerious]

@wwwap 正解。