как работает float:left, почему блочные элементы переносятся на новую строку или как оставить элемент HTML на той же строке

блочные элементы в 1 строку через float: left

html код страницы

CSS код страницы

  1. Элемент должен являться блочным чтобы это работало, т.е. когда применено свойство float: left элемент переводится браузером в блочный (display: block)
  2. Блочные элементы по-умолчанию начинаются с новой строки. Не достаточно просто сделать элемент блочным, чтобы оставить его на той же строке.
  3. Чтобы блочный элемент оставался на той же строке нужно задать предыдущему перед ним элементу CSS стиль float: left .
  4. У родителя обоих элементов (их контейнера) должна быть задана ширина width в процентах, пикселях или чем-то еще.
  5. Эта ширина не должна быть меньше ширины обоих объектов внутри контейнера, включая их margin, padding, border.



код странички тестирования


See the Pen single line block elements (как сделать блоки (блочные элементы) одной строкой CSS, HTML) by Vladimir Tyuryukov (@tvs-sm) on CodePen.dark

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *