css - 我怎样才能保持水平 div(连续 3 个)，它们之间的边距与包装内联？

Question

基本上我有三个连续的 div，在响应式布局中每个 div 之间有 10px 的边距。

目前 div 的 margin-left: 10px;右边距:10px；在他们保持他们间隔开。但是，我想让它与包装器保持内联，简而言之，在第一个 div 的开头和最后一个 div 的结尾与包装器相遇的地方没有边距，因此它完全适合包装器。

我怎样才能做到这一点？

谢谢!

代码:

CSS -

#frontpage {
float: left;
width: 32.33%;
margin-left: 0.5%;
margin-right: 0.5%;

Wordpress 输出中的 HTML:

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

Answer 1

假设这个 HTML

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

和这个 CSS:

#wrapper > div {
    float: left;
    margin: 0 10px;
}

然后，改用这个 CSS:

#wrapper > div {
    float: left;
    margin-left: 20px;
}
#wrapper > div:first-child {
    margin-left: 0;
}