Веб дизайн

Germany.ru → Группы → Архив Досок→ Болталка (Политика, программирование, дизайн)

810 просмотров Перейти к просмотру всей ветки

11.09.23 07:36

Re: Веб дизайн

uscheswoi_82 коренной житель

в ответ uscheswoi_82 17.07.23 16:58, Последний раз изменено 11.09.23 08:22 (uscheswoi_82)

Теперь давайте улучшим наш сайт. Добавим три колонки, которые при уменьшение размера окна веб браузера будут переноситься на следующую строку:

Спомощью вот этой строки, мы заставим браузер при уменьшение размера окна веб браузера, перенести контент на следующую строку:

.clearfix:after { content: ""; clear:both; display:table; }

Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его:

.left { float:left; }

Вот полный код index.html:

<!DOCTYPE html>
<html>
  <head>
    <style>
    * { padding:0; margin:0; }
       .clearfix:after { content: ""; clear:both; display:table; }
       .left { float:left; padding:3px 3px; }
       .right { float:right; padding:3px 3px; }
    </style>
    <title>Заголовок сайта</title>
  </head>
  <body>
    <div id="content">
      <div class="clearfix">
         <div class="left" style="width:200px;">
           <p>Тут первая колонка! Это мой первый сайт!</p>
         </div>
         <div class="left" style="width:200px;">
           <p>Тут вторая колонка! Красиво неправдо ли?</p>
         </div>
         <div class="left" style="width:200px;">
           <p>Тут третья колонка! Какой хороший день!</p>
         </div>
      </div>
    </div>
  </body>
</html>

А вот результат:

Если сожмём окно веб браузера, третья колонка перенесётся автоматически вниз:

Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнение

Перейти на