为父母中的平等子女创建保证金而不会溢出

Question

我想在父包装器的两个子div之间创建一个间隙。问题是，我创建宽度为百分比（50），并希望固定的余量为s = 'string with %%substring1%% and %%substring2%%'，而不会溢出父级。

%%

当我添加边距或填充到＆＃34;一个＆＃34;或者＆＃34;两个＆＃34;，这超过父母宽度的总100％。我可以将边距/填充添加到div元素，以便计算到父元素的50％吗？

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

Answer 1

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

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