Question

我正在练习3盒用于响应目的。当我没有盒子的边距时，它的效果非常好。但是当我添加保证金时，没有发生所需的结果。然后我必须使用45％的百分比如果我想并排两个盒子。但也不可能使用50％来计算保证金吗？

这是我的代码。如果可能的话，我将非常感谢。

* {
	box-sizing: border-box;
}

body {
	background-color: lightblue;
}
.container {
	display: flex;
	flex-wrap: wrap;
}
.box {
	width: 100%;
	height: 100px;
}
.blue {
	background-color: orange;
	width: 100%
}

.red {
	background-color: red;
}
.green {
	background-color: green;
}

@media  screen and (min-width: 500px) {
	.blue {
		width: 50%;
	}
	.red {
		width: 50%;
	}
	
}

@media  screen and (min-width: 700px) {
	.blue {
		width: 33%;
	}
	.red {
		width: 33%;
	}
	.green {
		width: 33%;
	}
	
}

<!DOCTYPE html>
<html>
<head>
	<title>Testing</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<div class="container">
  <div class="box blue"></div>
  <div class="box red"></div>
  <div class="box green"></div>	
</div>

</body>
</html>

Answer 1

使用填充框大小，不要使用边距。使用这个Html：

和CSS

@a

Answer 2

margin属性不是div元素的内部部分。但是，当您设置box-sizing: border-box时，border将成为div元素的一部分。因此，您可以将border-width设置为所需的百分比值，并将border-style设置为solid，将border-color设置为lightblue的背景颜色。

http://www.w3schools.com/css/css_boxmodel.asp

＆＃13;

* {
	box-sizing: border-box;
}

body {
	background-color: lightblue;
}
.container {
	display: flex;
	flex-wrap: wrap;
}
.box {
	width: 100%;
	height: 100px;
    border-width: 5%;
    border-color: lightblue;
    border-style: solid;
}
.blue {
	background-color: orange;
	width: 100%
}

.red {
	background-color: red;
}
.green {
	background-color: green;
}

@media  screen and (min-width: 500px) {
	.blue {
		width: 50%;
	}
	.red {
		width: 50%;
	}
	
}

@media  screen and (min-width: 700px) {
	.blue {
		width: 33%;
	}
	.red {
		width: 33%;
	}
	.green {
		width: 33%;
	}
	
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Testing</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<div class="container">
  <div class="box blue"></div>
  <div class="box red"></div>
  <div class="box green"></div>	
</div>

</body>
</html>

＆＃13;

Answer 3

当您在div上应用边距时，它将应用于div的外部。因此，您需要减小盒子的宽度。

如果您在一行中有4个盒子，则可以向所有人分配25％的宽度如果你想增加约1％的边距，那么你需要减少每个div的1％宽度。

保证金导致回应问题

3 个答案: