Html 如何保持边距的百分比宽度

我有一个浮动列表，其中包含3个高度相同的框。我给了它们33.333%的宽度，使它们相等，并填满整个容器

我必须让中间的盒子两边都有5px的边距，因此我的33.333%得到了超过100%的边距

我知道我可以使用calc（100%-5px）来解决这个问题，但问题是我不希望外部框有任何边距，只希望中间框有边距。用这种方法，我得到了左框的5px边距

.highlights-list {
width: 30%;
position: relative;
overflow: hidden;
border: 2px solid lime;
padding: 0;
}
.highlight {
    width: calc(33.333%- 5px);
    text-align: left;
    opacity: 0.9;
    float: left;
    padding: 5px;
    list-style-type: none;
    background: red;
    margin-left: 5px;
}

---

你可以看到我的整个小提琴。

解决方案非常简单-

---

解决办法很简单-

---

简单的解决方案是覆盖第一个子项的边距相关设置：

.highlight:first-child {
    width: 33.333%;
    margin-left: 0;
}

---

简单的解决方案是覆盖第一个子项的边距相关设置：

.highlight:first-child {
    width: 33.333%;
    margin-left: 0;
}

---

添加

框大小：边框框至
。突出显示
，将
左边距更改为
边距：2px和设置
宽度：计算（33.333%-4px）

小提琴：
添加
框尺寸：边框框至
。突出显示
，将
左边距更改为
边距：2px和设置
宽度：计算（33.333%-4px）

小提琴：
使用flexbox更简单


.wrap{
宽度：500px；
显示器：flex；
边框：1px纯红；
保证金：自动；
}
.盒子{
高度：150像素；
弹性：1；
边框：1px纯绿色；
}
.wrap>div:n个子项（2）{
利润率：0.5px；
}
使用flexbox更简单


.wrap{
宽度：500px；
显示器：flex；
边框：1px纯红；
保证金：自动；
}
.盒子{
高度：150像素；
弹性：1；
边框：1px纯绿色；
}
.wrap>div:n个子项（2）{
利润率：0.5px；
}

在您的小提琴中，布局被破坏。@Lucian您的浏览器是什么？Opera 30.0。不确定这是否是浏览器问题，第三个元素被压在第一个元素下：@Lucian这里有一个支持此功能的浏览器表-这是Google Chrome 44.0.2403.125中的外观-第一个是你的，第二个是我的，正如你所看到的Opera 30支持
calc
：）在你的小提琴中，布局被破坏了。@Lucian你的浏览器是什么？Opera 30.0。不确定这是否是浏览器问题，第三个元素被压在第一个元素下：@Lucian这里有一个支持此功能的浏览器表-这是Google Chrome 44.0.2403.125中的外观-第一个是你的，第二个是我的，正如你所看到的Opera 30支持
calc
：）这样，我的第n个孩子（2）得到的宽度比他的兄弟姐妹少。有没有办法保持这一点？是的。只需添加
框大小：边框框至
。突出显示
，将
左边距更改为
边距：2px和设置
宽度：计算（33.333%-4px）。这样就可以了，无需使用任何伪选择器。我编辑我的答案以反映这一点。这样，我的第n个孩子（2）的宽度比他的兄弟姐妹小。有没有办法保持这一点？是的。只需添加
框大小：边框框至
。突出显示
，将
左边距更改为
边距：2px和设置
宽度：计算（33.333%-4px）。这样就可以了，无需使用任何伪选择器。我编辑我的答案来反映这一点。快告诉我吧。同样值得一提的是，根据caniuse.com的说法，
flexbox
实际上比
calc
（忽略供应商前缀）具有更好的浏览器支持，并使用
box size:border box
将为您提供比flex更好的浏览器支持（据caniuse.com称）击败我。同样值得一提的是，根据caniuse.com的说法，
flexbox
实际上比
calc
（忽略供应商前缀）具有更好的浏览器支持，并使用
box size:border box
将比flex提供更好的浏览器支持（根据caniuse.com）
.highlight {
    width: calc(33.333% - 4px);
    box-sizing: border-box;
    text-align: left;
    opacity: 0.9;
    float: left;
    padding: 5px;
    list-style-type: none;
    background: red;
    margin: 2px;
}