响应式布局管理百分比答案

【问题标题】：Responsive layout managing percentages响应式布局管理百分比
【发布时间】：2014-05-16 09:31:09
【问题描述】：

我正在尝试使用百分比制作自己的响应式布局。我设法计算出我想使用的列，但我不知道如何在列之间放置边距（装订线）。如果您检查 codepen 代码，则内容之间没有空格。

   .container{
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    /*background: #333;*/
}


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

    .row{
        float: left;
        clear: both;
        width: 100%;
    }

    .container .columns.col-1 { width: 8.33333333333%; }
    .container .columns.col-2 { width: 16.6666666667%; }
    .container .columns.col-3 { width: 25%;   }
    .container .columns.col-4 { width: 33.3333333333%; }
    .container .columns.col-5 { width: 41.6666666667%; }
    .container .columns.col-6 { width: 50%;   }
    .container .columns.col-7 { width: 58.3333333333%; }
    .container .columns.col-8 { width: 66.6666666667%; }
    .container .columns.col-9 { width: 75%;   }
    .container .columns.col-10{ width: 83.3333333333%; }
    .container .columns.col-11{ width: 91.6666666667%; }
    .container .columns.col-12{ width: 100%;  }

【问题讨论】：

标签： css html responsive-design grid

【解决方案1】：

我个人会回避 Calc，因为它仍然不完全受支持，但取决于您 — http://caniuse.com/#feat=calc

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

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

DEMO

【讨论】：

哦，我不知道计算限制，我以为旧浏览器会支持它。
是的，这是一个非常酷的概念，但在现实世界中，大多数人都需要 ie8 支持，这很可悲。您可以通过回退到使用 JQuery 计算来填充它，但这有点混乱和不必要。
如果这是您正在寻找的答案，您能否将其标记为已修复？或者，如果您正在寻找其他东西，请详细说明。谢谢！

【解决方案2】：

不给padding，而是给margin

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

【讨论】：

【解决方案3】：

使用calc() 方法从宽度计算边距。例如对于.col-3，CSS 将是

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

确保像这样以正确的方式使用 calc()

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

【讨论】：

我也试过了，但仍然会破坏列。我尝试减小列宽，但我认为这不是最佳做法。 请使用上面的 codepen 尝试任何建议的方法
@nCore 这个解决方案看起来不错，只需在左右两边均匀分布边距以使其居中。看看这个codepen.io/anon/pen/IGLnz
@Mohammad Hamza & Froient Cool，也许我自己测试错了。我很抱歉一直试图找到解决方案并感到沮丧。谢谢。
其次，您也可以使用 % 作为保证金。 .col-3 宽度和边距都将设置为 %。那是.col-3{width:23%;margin:0 1%;}
nCore 你能描述一下你真正想要什么。您想在这些列之间创建边距吗？

【解决方案4】：

如果你看到你的列宽度，你已经平均划分了 100% 的视口宽度。

例如：

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

所以在这种情况下，两个块之间不会有任何空间。

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

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

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

或

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

第一种方法更好。

【讨论】：