三个div并排但他们之间没有自动保证金

Question

我在容器中并排放置了4行三个div。整个事情应该是响应性的，所以它自动调整到可变的容器宽度，即桌面三个div，平板电脑两个divs彼此相邻，智能手机，单独一个div。 我认为当为每个div设置30％的宽度时，余下的10％将在两个div之间按边距分割，即每个div之间的5％边距。但是现在我在第三个div的右侧获得了10％的全部保证金，这意味着所有的div都粘在了一起。如何在div之间获得2 x 5％的保证金（保证金权利：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容器），但根据您的原始评论，这似乎是您期待的方法