我想有兩個div展開到一個容器div的寬度，但相反，我有水平空間剩餘

Question

我有一個簡單的網頁，在一個容器div中有兩個div。

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

#container { 
    height: 50px; 
    width: 100%; 
} 

#left, #right { 
    float: left; 
    height: 100%; 
    line-height: 100%; 

} 

兩個並排的，不需要與內容拓展，因爲內容沒有填寫申報單，但div的需要有填充相同數量，並填補了#container的股利。 我之前並不清楚，但兩個div都需要有相同的填充，但寬度不同。一個將包含一個名稱，另一個包含電子郵件地址，因此第二個更長。

我無法得到它，以便divs填充容器div的寬度。 #right div後面有空格。

此外，一切都基於百分比，而不是一個固定的佈局，只有CSS。

這似乎很簡單，所以有人可以指出我正確的方向嗎？

Answer 1

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

#container { 
    height: 50px; 
    width: 100%; 
} 

#left, #right { 
    float: left; 
    width:46%; padding:2%; 
    height: 96%; 
    line-height: 100%; 

} 

Answer 2

您目前沒有在兩個浮動元素上設置寬度。添加一個解決了一切：

#container { 
    overflow: hidden; 
    background: green; 
} 

#left, #right { 
    float: left; 
    box-sizing: border-box; 
    width: 50%; 
    padding: 5% 10%; 
    text-align: center; 
} 

#left { background: red } 
#right { background: blue } 
​ 

小提琴：http://jsfiddle.net/u4G7c/1/

Answer 3

無國界和填充，給DIVŞ50%的width。如果您需要邊框和填充，請給他們width的50%並將box-sizing設置爲border-box。

Answer 4

我做了一些改動，但最重要的是#right刪除float: left然後adding overflow: hidden。

參見：http://jsfiddle.net/thirtydot/2AS58/

HTML：

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right@sdfgsdfsdf.com</div> 
</div>​ 

CSS：

#container { 
    border: 1px solid red; 
    margin: 10px; 
} 

#left, #right { 
    padding: 10px; 
    height: 30px; 
    line-height: 30px; 
    border: 1px solid blue; 
} 
#left { 
    float: left; 
} 
#right { 
    overflow: hidden; 
}​