Question

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

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;
}

Answer 2

inline-block实际上使您的块适合该行，默认情况下在底部对齐。 float: left;是解决问题的解决方案之一。使用vertical-align的 @ g-l-p 解决方案是另一个不错的选择。

#test1>div{
    float: left;
    width:100px;
    height:200px;
}

http://jsfiddle.net/RedBreast/4jfxjuf5/1/

Answer 3

添加此内容 -

#test1>div {
    vertical-align: top;
}

到现有的CSS

Answer 4

只需更新以下css -

#test1>div{
  float: left;
  width:100px;
  height:200px;
}

请参阅更新 - fiddle

另请使用vertical-align:top; css，请参阅 - fiddle

如何将内容与顶部对齐

4 个答案: