设置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。我想，这人会是最好的解决方案，因为它也将与旧版浏览器兼容。