Css 响应式布局管理百分比

我正在尝试使用百分比来制作自己的响应性布局。我设法计算了我想要使用的列，但我无法计算出如何在列之间设置一个边距（边沟）。如果检查代码笔代码，则内容之间没有空格

---

而不是给边距

.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
margin-right: 1em;
margin-left: 1em;
border-left-width:12px;
}

使用

calc（）

方法从宽度计算边距。例如，对于

.col-3

CSS

.container .columns.col-3 { 
width: calc(25% - 5px);
margin-right:5px;
}

确保使用calc（）的方式正确，如下所示

calc([first value][space][operator][space][second value])

---

如果看到列的宽度，则表示已将视口宽度的100%等分

例如：

.container .columns.col-6 {
   width: 50%;
}

因此，在这种情况下，两个块之间没有任何空间

因此，在提到列的宽度时，还需要考虑边距。

因此，您可以使用以下两种方法之一：

.container .columns.col-6 { 
   width: calc(50% - 10px); // 10px represents the margin / space
   margin-right:10px;
}

或

---

第一种方法更好。

我个人会避开Calc，因为它仍然没有得到完全支持，但取决于您-

我建议您将所有内容包装在另一组元素中，这样您就可以使用填充作为间距，使用边距进行对齐。查看演示

<div class="columns col-6"><div>6</div></div>

6

---

我也试过了，但还是把柱子弄断了。我试着减少列的宽度，但我认为这不是一个最好的做法。请使用上面的代码笔尝试任何建议methods@nCore这个解决方案似乎很好，只要将边距均匀地分布在左右两侧，使其居中即可。看看这个@Mohammad Hamza&Froient Cool，也许我自己测试错了。我的道歉一直试图找到一个解决办法，但最终还是失败了。谢谢。第二，你也可以用%作为保证金

.col-3

宽度和边距都将设置为%。那就是.col-3{宽度：23%；边距：01%；}n你能描述一下你到底想要什么吗。你想在这些列之间创建边距吗？哦，我不知道calc的限制，我以为旧浏览器会支持它。是的，这是一个非常酷的概念，但在现实世界中，大多数人都需要ie8支持。你可以通过使用JQuery计算来填充它，但是这有点混乱和不必要。如果这是你想要的答案，你能把它标记为修复吗？或者，如果您正在寻找其他产品，请详细说明。谢谢

.container .columns.col-6 { 
   width:  46%;
   margin-right: 1%;
}

<div class="columns col-6"><div>6</div></div>