набор элементов ширины в divs

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> 

Это выглядит нормально на полную страницу: 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

Альтернативным решением будет использовать tables 4 столбцов, а затем colspan последний адрес input до 3. Я думаю, это один будет лучшим так как он будет совместим со старыми браузерами.