Рубрики
CSS, Boostrap HTML Программирование

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


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

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

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”pxyMaB” default_tab=”html,result” user=”tvs-sm”]See the Pen single line block elements (как сделать блоки (блочные элементы) одной строкой CSS, HTML) by Vladimir Tyuryukov (@tvs-sm) on CodePen.[/codepen_embed]

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

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