如何使三个div的间隔相等，然后到父元素两端的也均匀分布？

如何使这两个距离变成一样？也就是如何使这三个盒子在父容器中居中？ (除了给这三个div加一个父元素这个方法)

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

body,div{

margin:0;

padding:0;

}

.container{

margin:20px auto;

width:1140px;

padding:0 20px;

border:1px solid red;

overflow: hidden;

zoom:1;

}

.box1{

width: 360px;

height: 400px;

margin-right: 4px;

margin-bottom: 26px;

background:yellow;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

源自：float浮动 3-4 编程练习

收起

2回答

好帮手慕糖 2019-05-15 16:44:15

你好，那建议：同学把每行最后一个元素的右外边距去掉，因为第一个元素，左边都没有间距，但是最后一个右边有，导致右边的空白，比左边大。所以可以去掉最后一个的间距。

祝学习愉快！

好帮手慕糖 2019-05-15 11:17:55

同学你好，1、可以先设置小盒子左右两侧的外边距值相等，这样保持左右的间距都一致，另，这里上下外边距也可以一起设置了哦，例：

2、然后在计算大盒子的宽，一个小盒子占据的宽度是400（包括左右的外边距），一行三个，400*3 = 1200px，所以大盒子可以设置1200px，例：

希望能帮助到你，祝学习愉快！

提问者芥子1204 #1

这样相当于都均匀分布了但是我想保持三个div的间隔不变但是三个div在整个父元素中是居中的有没有什么方法？

2019-05-15 11:22:44
好帮手慕糖回复提问者芥子1204 #2

你好，现在就是三个间距是不变的，三个整体也是相对于父级居中的哦。祝学习愉快！

2019-05-15 13:35:47
提问者芥子1204 回复好帮手慕糖 #3

我的意思是不动box1的外边距的情况下使三个div在整个父元素中居中

2019-05-15 16:34:23