css，使两个在同一行内的display:inline-block的div顶部对齐。一、首先是HTML布局：<!DOCTYPEhtml&g

资源ID：

一、首先是HTML布局：

两个行内快元素顶部对齐

二、未添加CSS样式的在浏览器效果浏览：

三、添加CSS样式的：

两个行内快元素顶部对齐

div {
display: inline-block;
vertical-align: top;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
width: 200px;
height: 100px;
background-color: skyblue;
}

开发工具里面的截图：

四、最终在浏览器里面的效果：

一、首先是HTML布局：

两个行内快元素顶部对齐

二、未添加CSS样式的在浏览器效果浏览：
三、添加CSS样式的：

两个行内快元素顶部对齐

div {
display: inline-block;
vertical-align: top;
}
.box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box2 {
width: 200px;
height: 100px;
background-color: skyblue;
}

开发工具里面的截图：
四、最终在浏览器里面的效果：

这是因为你设置display：inline-block的原因其实你完全可以用浮动来布局
.zuo{float:left;width:200px;height:300px;background:#f00;}
.you{float:left;width:200px;height:500px;background:#666;}

两个都加上：vertical-align:top;

css，使两个在同一行内的display:inline-block的div顶部对齐。一、首先是HTML布局：&lt;!DOCTYPEhtml&g

css，使两个在同一行内的display:inline-block的div顶部对齐。一、首先是HTML布局：<!DOCTYPEhtml&g