Question

我有一个浮动列表，其中包含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;
}

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

Answer 1

flexbox

更简单

＆＃13;

.wrap {
  width: 500px;
  display: flex;
  border: 1px solid red;
  margin: auto;
}
.box {
  height: 150px;
  flex: 1;
  border: 1px solid green;
}
.wrap > div:nth-child(2) {
  margin: 0 5px;
}

＆＃13;

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

解决方案非常简单 - http://jsfiddle.net/13j4qqqe/3/

.highlight:nth-child(2) {
    width: calc(33.333%- 10px);
    margin: 0 5px;
}

Answer 3

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

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

Answer 4

将box-sizing: border-box;添加到.highlight，将margin-left更改为margin: 2px;并设置width: calc(33.333% - 4px);

.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;
}

小提琴：http://jsfiddle.net/13j4qqqe/7/

如何用边距保持百分比宽度

4 个答案: