<分区>
html - 使用 CSS 在列之间放置间隙
我正在创建一个网页，该网页应该有 3 列，它们之间有空格。
它应该是这样的:
实际情况如下:
如何修正我的代码，使网页在列之间有间隙？
我想要一个响应式的 3 列设计(当屏幕宽度低于 600 像素时，它会覆盖所有网页)。我不想要 3 个绝对测量列。
请注意，我在第三个 div 的末尾有 1 个像素:这是有意为之的，因为这是用浏览器查看时的样子。
这是我的 HTML:
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
还有我的 CSS:
#container {
width: 960px;
}
.squares {
width: 33.33%;
height: 250px;
background: red;
}
最佳答案
您要实现的目标已经使用 Bootstrap 构建，但这里仍然是一个有效的 JSFIDDLE .
CSS:
#container{
width: 960px;
}
.squares{
width: calc(98% / 3);
margin-right: 1%;
height: 250px;
float:left;
background: red;
}
.squares:last-child{
margin-right: 0%;
}
关于html - 使用 CSS 在列之间放置间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26721606/