html - 三个 div 并排但它们之间没有自动边距

Question

我在一个容器中并排放置了 4 行，每行三个 div。整个事情应该是响应式的，所以它会自动调整到可变的容器宽度，即桌面三个 div，平板电脑两个 div 并排，智能手机一个 div。我认为当将每个 div 的宽度设置为 30% 时，剩余的 10% 将根据边距在两个 div 之间分配，即每个 div 之间的边距为 5%。但是现在我在第三个 div 的右边得到了全部 10% 的边距，这意味着所有的 div 都粘在一起了。如何在 div 之间获得 2 x 5% 的边距(margin-right:5% 不起作用)？

.aaa {
    position: relative;
    display: block;
    text-align: left;
	margin-top:30px;
	padding:2px 25px 2px 25px;
	text-align:center;
	float:left;
	width:30%;
	height:239px;
    background-color:blue;
}

.bbb {
    position: relative;
    display: block;
    text-align: left;
	margin-top:30px;
	padding:2px 25px 2px 25px;
	text-align:center;
	float:left;
	width:30%;
	height:239px;
    background-color:grey;
}

.ccc {
    position: relative;
    display: block;
    text-align: left;
	margin-top:30px;
	padding:2px 25px 2px 25px;
	text-align:center;
	float:left;
	width:30%;
	height:239px;
    background-color:green
}

.ddd {
    position: relative;
    display: block;
    text-align: left;
	margin-top:30px;
	padding:2px 25px 2px 25px;
	text-align:center;
	float:left;
	width:30%;
	height:239px;
    background-color:yellow
}

.eee {
    position: relative;
    display: block;
    text-align: left;
	margin-top:30px;
	padding:2px 25px 2px 25px;
	text-align:center;
	float:left;
	width:30%;
	height:239px;
    background-color:red
}

.fff {
    position: relative;
    display: block;
    text-align: left;
	margin-top:30px;
	padding:2px 25px 2px 25px;
	text-align:center;
	float:left;
	width:30%;
	height:239px;
    background-color:black
}

<div class="container">
<div class="aaa"><a href="#"><h1>aaa</h1></a></div>
<div class="bbb"><a href="#"><h1>bbb</h1></a></div>
<div class="ccc"><a href="#"><h1>ccc</h1></a></div>
<div class="ddd"><a href="#"><h1>ddd</h1></a></div>
<div class="eee"><a href="#"><h1>eee</h1></a></div>
<div class="fff"><a href="#"><h1>fff</h1></a></div>
</div>

Answer 1

确保您正在使用 box-sizing 以便正确计算 padding。您还可能希望利用媒体查询来实现您的目标，即在较小的屏幕上减少并排元素。

https://jsfiddle.net/a6ry5m7v/

肯定有更现代的方法(例如 flex 容器)，但根据您最初的评论，这似乎是您期望的方法