html中三个盒子并排间距_随笔

div盒子并排显示在各大网页中是很寻常的页面效果，但是实现这种效果的方法确不止一种

方法一：使用float

.father{

width: 660px

height: 150px

margin: 0 auto

border: 2px solid red

overflow: hidden

}

.son{

width: 150px

height: 150px

float: left

text-align: center

line-height: 150px

margin-right: 20px

}

.last{

margin-right: 0

}

</div>

登录后复制

原本的浮动之后再设置外边距，外层盒子的宽度会不够导致最后一个盒子在第二排显示

为什么不显示？

原因：父元素：660px <150px4 + 20px4 = 680px

因此还需要再重新定义最后一个盒子的右外边距为0

方法二：使用 display：inline-block

.father{

width: 660px

height: 150px

margin: 0 auto

border: 2px solid red

font-size: 0

}

.son{

width: 150px

height: 150px

display: inline-block

*display: inline

*zoom: 1

text-align: center

line-height: 150px

margin-right: 20px

font-size: 14px

}

.last{

margin-right: 0

}

</div>

登录后复制

但是使用 display：inline-block会出现一些情况，比如

可以这么理解

盒子模型就是一个个的二维的纸盒子

页面布局就是一个空房间，要往里面放纸盒子

每个纸盒子之间要有间隔，这就是外间距

纸盒子里面要放东西，这些东西与纸盒子四壁的距离就是内边距

纸盒子的四个壁就是border

负边距：

<!DOCTYPE html>

<html>

<head>

* {

margin: 0

padding: 0

}

#div1 {

width: 780px

height: 380px

margin: 0 auto

border: 3px solid lightblue

overflow: hidden

margin-top: 10px

}

.box {

width: 180px

height: 180px

margin: 0 20px 20px 0

background: lightgreen

float: left

}

#div2{

margin-right: -20px

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

实际效果！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7273979.html

html中三个盒子并排间距

发表评论

评论列表（0条）