設置div元素中的寬度元素

Question

我有3個divs：其中2個在一行中，第三個在它們下面。 我想要將TextBox與上面的TextBox進行協調。

您有解決方案嗎？

非常感謝！

.form-group { 
    float: left; 
    width: 50%; 
    height:50px; 
} 
    .form-group label { 
     float:left; 
     width: 130px; 
    } 
    .form-group input { 
     float:left; 
     width: 230px; 
    } 

<div class="form-group"> 
    <label for="name">Name</label> 
    <input id="name" type="text" /> 
</div> 
<div class="form-group"> 
    <label for="family">Family</label> 
    <input id="family" type="text" /> 
</div> 
<div class="form-group" style="width:100%;"> 
    <label for="address">Address</label> 
    <input type="text" id="address" style="width:67%"/> 
</div> 

它看起來OK一整頁上：http://aug.imghost.us/QWQo.jpg但是當頁面大小被改變的盒裝沒有很好地對齊：http://aug.imghost.us/QWRO.jpg

Answer 1

事情是這樣的：

<div class="form-group"> 
    <label for="name">Name</label> 
    <input id="name" type="text" /> 
</div> 
<div class="form-group"> 
    <label for="family">Family</label> 
    <input id="family" type="text" /> 
</div> 
<div class="form-group" style="width:90%;"> 
    <label for="address">Address</label> 
    <input type="text" id="address" /> 
</div> 

<style> 
.form-group { 
float: left; 
width: 40%; 
height:50px; 
margin: 0 5%; 
} 
.form-group label { 
float:left; 
width: 135px; 
} 
.form-group input { 
float:left; 
width: calc(100% - 135px); 
} 
</style> 

Answer 2

刪除您在地址input上應用的內聯樣式並更改如下所示的css -

.form-group { 
float: left; 
width: 50%; 
height:50px; 
box-sizing: border-box; 
padding-right: 20px; 
} 
.form-group label { 
    float:left; 
    width: 130px; 
} 
.form-group input { 
    float:left; 
    box-sizing: border-box; 
    width: calc(100% - 130px); /* supported in latest browsers */ 
} 

check out the compatible browsers for calc - http://caniuse.com/#feat=calc

這裏是working fiddle

另一種解決方案將使用4列tables然後colspan末地址input至3。我想，這人會是最好的解決方案，因爲它也將與舊版瀏覽器兼容。