У меня есть родительский div form-group
, а внутри группы форм есть несколько плавающих div.сделать плавающие divs продолжать стекаться вправо
Вот их атрибуты CSS:
.form-group {
overflow: auto;
width: 100%;
}
.department { width: 10%; white-space: nowrap; float: left; }
.firstname { width: 10%; white-space: nowrap; float: left; }
.lastname { width: 10%; white-space: nowrap; float: left; }
.title { width: 15%; white-space: nowrap; float: left; }
.email { width: 15%; white-space: nowrap; float: left; }
.mobile { width: 15%; white-space: nowrap; float: left; }
.phone { width: 15%; white-space: nowrap; float: left; }
.fax { width: 15%; white-space: nowrap; float: left; }
.remark { width: 20%; white-space: nowrap; float: left; }
А вот как они расположены:
<div class="form-group">
<div class="clear"></div>
<div class="department"><input name="contact[][department]" type="text" value="<?php echo $contact['department']; ?>"></div>
<div class="firstname"><input name="contact[][firstname]" type="text" value="<?php echo $contact['firstname']; ?>"></div>
<div class="lastname"><input name="contact[][lastname]" type="text" value="<?php echo $contact['lastname']; ?>"></div>
<div class="title"><input name="contact[][title]" type="text" value="<?php echo $contact['title']; ?>"></div>
<div class="email"><input name="contact[][email]" type="text" value="<?php echo $contact['email']; ?>"></div>
<div class="mobile"><input name="contact[][mobile]" type="text" value="<?php echo $contact['mobile']; ?>"></div>
<div class="phone"><input name="contact[][phone]" type="text" value="<?php echo $contact['phone']; ?>"></div>
<div class="fax"><input name="contact[][fax]" type="text" value="<?php echo $contact['fax']; ?>"></div>
<div class="remark"><input name="contact[][remark]" type="text" value="<?php echo $contact['remark']; ?>"></div>
<button type="button" class="btn btn-default removeButton fl"><i class="fa fa-minus"></i></button>
<div class="clear"></div>
</div>
Родитель ДИВ дается overflow: auto;
и суммарная ширина плавающих детей дивы превышает 100%. Поэтому я ожидал, что плавающие дочерние divs будут уложены вправо, тогда как родительский div отобразит горизонтальную полосу прокрутки, чтобы отобразить часть дочерних div, которая выходит за пределы 100%.
Однако ребенок дивы укладываются пока сумма ширины не доходит до 100%, и все, что за 100% переходит к следующей строке, например следующее:
| div 1 | | div 2 | | div 3 | | div 4 | | div 5 | | div 6 | | div 7 |
| div 8 | | div 9 |
Как сделать все эти 9 разделов сложенными вправо в одной строке?
Спасибо!
Салман/Спасибо! – Dongsan