在没有溢出的情况下为父级中的相等子级创建边距答案

【问题标题】：Create margin for equal children in parent without overflow在没有溢出的情况下为父级中的相等子级创建边距
【发布时间】：2015-05-20 05:23:28
【问题描述】：

我想在父包装器的两个子 div 之间创建一个间隙。问题是，我将宽度创建为百分比 (50)，并且希望固定边距为 10px total 而不会溢出父级。

<div id="wrapper">
    <div id="parent">
        <div id="one" class="child"> </div>
        <div id="two" class="child"> </div>
    </div>    
</div>

当我向“一”或“二”添加边距或填充时，这超过了父宽度的总和 100%。我可以将边距/填充添加到 div 元素，以便计算到父元素的 50% 吗？

这是一个说明问题的小提琴：http://jsfiddle.net/cusyyddx/

【问题讨论】：

如果你知道包装总是600px，你不能用像素值代替百分比吗？

标签： html css

【解决方案1】：

使用calc 作为您的宽度属性：width: calc(50% - 1px);。适用于 IE9+

【讨论】：

【解决方案2】：

我做了一些更改，现在两者之间没有溢出和 10px 间隙

#wrapper {
width: 600px;
}

#parent {
    position: relative;
    width: 98%;
    white-space: nowrap;
    font-size: 0;
    border: 1px solid red;
}

.child {
    display: inline-block;
    width: 49.15%;
    height: 50px;
}

#one {

    background: purple;
    margin-right: 5px;
}

#two {
    background: orange;
    margin-left: 5px;
}

【讨论】：