css - 如何使两个div符合所需宽度并避免包裹和重叠？

我正在使用相对宽度：

<style>
    #ldiv {
        height: 400px;
        width: 75%;
        background-color:#fff;
        color:#ccc;
        border: 1px solid #F2F2F2;
        float: left;
    }

    #rdiv {
        vertical-align: top;
        float: left;
        width: 25%;
    }
</style>

<div>
    <div id="ldiv">Left</div>
    <div id="rdiv">Right</div>
</div>

使用此代码，#rdiv不会留在#ldiv旁边。
如果在margin-right: -2px;中使用#ldiv，则两个div并排放置，但略有重叠。

我知道问题是由边界引起的，但是如何使它合适呢？

最佳答案

这样写：

#ldiv {
    height: 400px;
    background-color:#fff;
    color:#ccc;
    border: 1px solid #F2F2F2;
    overflow:hidden;
}

#rdiv {
    vertical-align: top;
    float: right;
    width: 25%;
}

的HTML

<div>
    <div id="rdiv">Right</div>
    <div id="ldiv">Left</div>
</div>

选中此http://jsfiddle.net/aYteE/

要么

您可以为此使用box-sizing属性。

选中此http://jsfiddle.net/aYteE/2/