内联元素的垂直对齐并从内联块元素之间移除空格

Question

我已经解决了一些问题。例如，我有两个具有恒定宽度和display: inline-block（http://jsfiddle.net/mgs8jLwk/）的块。我如何强迫左手留在顶部？对不起，如果它与某些问题重复。

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

Answer 1

将vertical-align: top添加到#one的CSS规则中：

#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 example

Answer 3

问题1 - 使块对齐顶部：

将“vertical-align:top;”用于“#one”div。

#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/

希望这会有所帮助！