html - 如何将内容对齐到顶部

Question

我有下一个fiddle .您可以看到放置的第二个 block 不在顶部。如何解决？

html 是 -

<div id="test1">
    <div id="ct1">
        <img width="100px" height="100px">
        <div id="cct1">
            123123 12312312 3123123123
        </div>
    </div>
    <div id="ct2">
        <img width="100px" height="100px">
        <div id="cct2">
            123123 12312312
        </div>
    </div>
</div>

样式 -

#test1{
    margin-top:300px;
}
#test1>div{
    display:inline-block;
    width:100px;
    height:200px;
}
#test1>div>div{
    height: 100px;
}

Answer 1

尝试使用垂直对齐属性: Demo

#test1>div{
    display:inline-block;
    width:100px;
    height:200px;
    vertical-align:top;
}