css - 带右边距的水平内容 div

Question

这是我的标记:

<div id="why-us">
    <span class="heading">Why Us?</span>
    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

这是我的 CSS:

#why-us { float: left; }
#why-us span.heading { font-size: 13pt; color: #3A3A3A; display: block; }
#why-us div.section { float: left; width: 400px; margin-right: 50px; }
#why-us div.section p { font-size: 9pt; }

我怎样才能让它只对每个 div.section 应用 margin-right: 50px; 除了最后一个？这只能用纯 CSS 完成吗？理想情况下，我不想指定“.last”类，也不想使用伪类，因为站点需要在所有浏览器中工作。

编辑:有更好的方法吗？由于我现在使用 PHP 生成代码，这意味着我必须添加额外的代码以使其检查最后一个 DIV。我知道这还不错，但我仍然更喜欢更优雅的解决方案:)

Answer 1

您可以覆盖最后一个 div 中的 CSS，如下所示:

<div id="why-us">
    <span class="heading">Why Us?</span>
    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="section" style="margin-right: 0px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

它真的很难看，但我认为它应该可以工作。