Div + float: как растянуть div по высоте?

307
10 декабря 2016, 10:42

Пытаюсь сделать таблицу из 2 колонок при помощи CSS:

<div style="display: block; padding: 5px 0px; width: 400px; clear: both;">
<div style="width: 200px; float: left;">
Несколько слов, которые растягиваются на 2 строки: </div>
<div style="display: block; width: 200px; float: left;">
45</div>
</div>
<label style="display: block; padding: 5px 0px; width: 400px; clear: both;">
...
</label>
...

Поскольку строкой таблицы может выступать как и div, так и label — поэтому display: block; (HTML генерируется из скрипта). На первый взгляд, отображается все так, как задумывалось, но просмотрев код в редакторе Google Chrome (Ctrl+Shift+i) обнаружил, что тег задающий строку (style="display: block; padding: 5px 0px; width: 400px; clear: both;") по высоте занимает только 10 точек, т.е. ячейки таблицы как-бы выпирают из строки.

Подскажите, как растянуть тег-строку таблицы по ширине наполнения?

Answer 1

блоки с float-ом не влияют на блоки без. Лучше сделай в <div style="display: block; padding: 5px 0px; width: 400px; clear: both;"> вместо clear: both; напиши overflow: hidden;. Твою проблему решит 100%.

READ ALSO
Почему мышь плохо цепляется за элемент?

Почему мышь плохо цепляется за элемент?

Картинка разделена на 9 квадратиков, если взяться за правый нижний и потянуть, то потянется сам контент, а потом, когда отпустишь, область...

314
Добавление превью картинки к видео в iframe

Добавление превью картинки к видео в iframe

В iframe загружается видео <iframe width="585" height="345" src="//wwwyoutube

1395
Как вывести значения функции Javascript в HTML?

Как вывести значения функции Javascript в HTML?

Как вывести значение first_name в блок div?

458
Проблемы с адаптивной версткой

Проблемы с адаптивной версткой

Всем доброго времени сутокПри верстке своей портфолио страницы столкнулся с проблемой

296