2浮動並排div的一面，沒有寬度

Question

HTML

<div id="container"> 
    <div id="one">One</div> 
    <div id="two">Two</div> 
</div> 

CSS

#container { 
    width: 500px; 
    height: 500px; 
    background-color: red; 
} 

#one { 
    width: 340px; 
    height: 100px; 
    margin: 20px; 
    background-color: green; 
    float: left; 
} 

#two { 
    width: 100px; 
    height: 100px; 
    margin: 20px 20px 20px 0px; 
    background-color: blue; 
    float: right; 
} 

這就是我想要做的：http://jsfiddle.net/p4ZAd/

我要打兩個div之間的邊距爲20px，這就是Iv'e得到了多少，但是有可能以其他方式做到嗎？

我最喜歡的是完全刪除「#one」上的寬度，並將其設置爲「#two」邊緣的最大尺寸。

Answer 1

喜歡這個

working fiddle

CSS

*{ 
    margin:0; 
    padding:0; 
} 
#container { 
    width: 500px; 
    height: 500px; 
    background-color: red; 
    display:table; 
} 

#one { 

    background-color: green; 

    display:table-cell; 
} 

#two { 

    background-color: blue; 
    display:table-cell; 
} 

Answer 2

您可以使用table和table-cell顯示類型，以模仿如何table的作品。然後使用border-spacing來完成單元格之間的空白。

HTML：

<div id="container"> 
    <div id="one">One</div> 

    <div id="two">Two</div> 
</div> 

CSS：

#container { 
    display: table; 
    width: 500px; 
    height: 400px; 
    background-color: red; 
    border-spacing: 20px; 
} 

#one { 
    display: table-cell; 
    background-color: green; 
} 

#two { 
    display: table-cell; 
    width: 100px; 
    background-color: blue; 
} 

JSFiddle here

Here's a list of browsers that support display: table;

Answer 3

可以設置PADD在#container上，然後爲#two設置負的右邊距。例如：

#container { 
    width: 360px; 
    height: 500px; 
    background-color: red; 
    padding: 20px 140px 20px 20px; 
} 

#one { 
    height: 100px; 
    background-color: green; 
    float: left; 
    width: 100%; 
} 

#two { 
    width: 100px; 
    height: 100px; 
    margin: 0 -120px 0 0; 
    background-color: blue; 
    float: right; 
} 

工作樣本：http://jsfiddle.net/SytvY/1/