如何使两个div适合所需的宽度，避免包裹和重叠？

Question

我正在使用相对宽度：

<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会并排排列，但会略有重叠。

我知道这个问题是由边框引起的，但我怎么能让它适合呢？

Answer 1

这样写：

#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/

Answer 2

使用超级div并将内部div设置为position：relative和float：left。避免给第二个div赋予宽度，因为边框会使它超过“100％”。

#container {
    width:100%;
}
#ldiv {
    height: 400px;
    width: 75%;
    position:relative;
    float:left;
    background-color:#fff;
    color:#ccc;
    border: 1px solid #F2F2F2;
    float: left;
}

#rdiv {
    vertical-align: top;
    position:relative;
    float:left;
}

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

Answer 3

嗨，我做了一些小改动。朋友请检查一下。

ldiv {

浮动：左;
    身高：400px;
    宽度：75％;
    背景色：＃545149;
    颜色：#CCC;
    border：1px solid＃F2F2F2;
}

rdiv {

浮动：左;
   填充：10px 10px 10px 10px;
}