您的位置：首页 > Web前端 > CSS

【HTML/CSS】关于对齐的总结

2014-07-09 18:23 399 查看

1、两个inline-block的元素处于同一行时，他们默认的vertical-align是baseline，即两者下边缘对齐

<style>

.div1{
position:relative;
width:500px;
height:300px;
background-color:#000;

}

.div2{
position:relative;
width:200px;
height:200px;
background-color:#F00;
display:inline-block;
}

.div3{
width:100px;
height:100px;
background-color:#0F0;
display:inline-block;
}

</style>

<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>

2、在两者的margin-top改变的时候，仍然保持上面的对齐原则不变，这样两者的margin-top的实际效果为较大者，如div3的margin-top在1-100px之间时，在网页中的显示仍然是上面的图片，当div3的margin-top大于100px时，div3的margin-top才有效果，如果将div3的margin-top设置为150px，则为

此时的div2的margin-top在1-50px时无效，类似上面的推算，依次类推下去

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航