内联元素的垂直对齐并消除内嵌块元素之间的空间

Question

我已经解决了一些问题。 例如，我有两个宽度恒定并display: inline-block （ http://jsfiddle.net/mgs8jLwk/ ）。 我该如何强迫左手留在最前面？ 抱歉，如果它与某些问题重复。

PS有没有办法在不注释html标记中的空格的情况下制作两列或更多列？

Answer 1

在您的CSS规则中为#one添加vertical-align: top ：

#one
{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    vertical-align: top;
}

http://jsfiddle.net/mgs8jLwk/1/

Answer 2

您可以将它们都向左浮动：

#one, #two {
    float:left;
}

jsFiddle示例

Answer 3

对于问题1-使块对齐顶部：

对“ #one ” div使用“ vertical-align:top; ”。

#one {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    vertical-align:top; /*FIX ADDED*/
}

对于问题2-替代<!-- COMMENT-->以消除DIVS之间的空间：

在父元素中添加“ font-size:0; ”：

#wrapper {
    margin: auto;
    width: 300px;
    font-size:0;
}

这里有一些其他选项可以消除内联块元素之间的空间： http : //css-tricks.com/fighting-the-space-between-inline-block-elements/

工作演示： http : //jsfiddle.net/8cfmjzg9/

希望这会有所帮助！