css calc(100%/5) 之间的边距计算在答案

【问题标题】：css calc(100%/5) with margins between calculated incss calc(100%/5) 之间的边距计算在
【发布时间】：2015-04-18 05:11:10
【问题描述】：

你可以使用 css calc 使 5 个 20% 宽度的 div 连续浮动，等于 100%。我的目标是让 5 个 div 向左浮动，每个 div 之间留有 1% 的边距。目前我必须使用 first-of-type 从第一个 div 中删除边距，以尝试将其与容器的左侧完美对齐。使用 calc 方法有更好的解决方案吗？我想我的问题是我不知道在哪里将边距包含在 cacl 中。

ul {
    width:500px;
}
li {
    width:calc(100%/5);
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}
li:first-of-type{
    margin-left:0px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

https://jsfiddle.net/qrd702dj/

【问题讨论】：

jsfiddle.net/qrd702dj/1 我永远无法将小提琴正确连接起来
您有什么理由使用calc？ 100% / 5 只会产生 20%，那么为什么不首先使用 20% 呢？还是我在这里遗漏了什么？
如果我这样做，我认为所有 5 个 div 都将相邻且之间没有边距。我想知道 calc 方法是否可以 100% 下降 5，然后还包括它们之间的边距，但不能在第一个或最后一个 div 边接触边缘。我正在考虑的另一个解决方案是将 box-sizing:padding-box 添加到 div 并为它们提供所有填充以使其看起来好像每个 div 之间都有空间。但话又说回来，第一个和最后一个 div 不会接触容器的侧面，会有一点间隙。

标签： css html

【解决方案1】：

实际上有一个巧妙的技巧可以实现这一点（这是 Bootstrap 3 网格系统所基于的）。您应该在包装器中添加一个左右负边距，它等于块之间的间距。这样您就不必删除第一个块的左边距和最后一个块的右边距。它们实际上将与边缘完美对齐，因为边距刚好溢出包装。用我不太流利的英语说起来有点困难，所以看看这个：

https://jsfiddle.net/qrd702dj/3/

ul {
    width:500px;
    margin: 0 -1%; /* this is the magic! */

}
li {
    width:19%;
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}

编辑：

使用这种技术的正确方法实际上是这样的：

 ul {
        margin: 0 -.5%; /* this is the magic! */
    }
    li {
        width:19%;
        background:blue;
        float:left;
        list-style:none;
        margin-left:.5%;
        margin-right:.5%;
    }

https://jsfiddle.net/qrd702dj/7/

这样，您可以将边距分布在左侧和右侧。你必须在一些包装元素上设置你的宽度，正如我在小提琴中展示的那样

【讨论】：

哈哈魔法是的！我确实觉得这个技巧有点脏，但即使我将 ul 更改为 100%，它仍然是一致的。 jsfiddle.net/qrd702dj/6
请注意，这并没有利用lis 可用的最大宽度，lis 比它们所能达到的更窄。
实际上使用负边距完全没问题，并且在所有浏览器中都得到了很好的支持smashingmagazine.com/2009/07/27/… 我承认这感觉有点不自然，但事实并非如此，TB3 使用它是有原因的.
@arbel 你是绝对正确的。不过我的更新应该是正确的。
非常有趣的技术，但它似乎在最右边缺少 1px - jsfiddle.net/qrd702dj/8

【解决方案2】：

虽然你可以做到这一点，但它似乎有点毫无意义。这是您更正的小提琴：

https://jsfiddle.net/qrd702dj/2/

问题是给 li 增加边距：

li {
  margin-left: 1%;
}

就像网格一样，边距添加到宽度的外部，这意味着您实际上拥有 105% 的宽度而不是 100%。确保改用填充并在其中嵌套一个包含所需内容的 div：

li {
    background:blue;
    padding: 5px;
}
li div {
    background: red;
}

【讨论】：

【解决方案3】：

您需要在宽度计算中包含1% 边距。类似的东西：

width: calc((-1 * 1%) + (100% / 5));

看这里：

ul {
    width:500px;
}
li {
    width: calc((-1 * 1%) + (100% / 5));
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}
li:first-of-type{
    margin-left:0px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

【讨论】：

【解决方案4】：

您实际上并不需要 calc 函数。您可以手动进行计算：

（100% - 4% 边距）/ 5 个元素 = 19.2% 宽度（不是 19%）。

但是，您只需将左边距应用于最后四个列表项 (li:not(:first-of-type) { margin-left: 1%; }) 或将其从第一个列表项中删除（就像您已经做的那样）。

ul {
  width: 500px;
}
li {
  width: 19.2%;
  background: blue;
  float: left;
  list-style: none;
  margin-left: 1%;
}
li:first-of-type {
  margin-left: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

【讨论】：

【解决方案5】：

您根本不需要在这里使用 calc，因为您的 div 的宽度将始终为 20%（宽度为 1% 的边距，使其宽度为 19% 以适合单行）。

演示：

ul {
    width:500px;
}
li {
    width:19.2%;
    background:blue;
    float:left;
    list-style:none;
    margin-left:1%;
}
li:first-of-type{
    margin-left:0px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

【讨论】：

如果我这样做，那么我将在 5 个 div 之间有 4 个间隙，19% x 5 = 95%，这意味着每个边距需要为 1.25%？我只是想知道 calc 方法是否可以为我做这个数学计算？
这并不是 calc 函数的真正用途。当您有两个不同的单位并在两个单位之间进行“计算”转换时使用它。

【解决方案6】：

您有 5 个 lis，其中 4 个在左侧有一个 1% 边距。

所以你应该使用calc(96% / 5) 而不是calc(100% / 5)

演示： https://jsfiddle.net/qrd702dj/5/

【讨论】：