Site icon Vavik96

Свойство CSS: float и его значения (left, right)

В данном уроке мы научимся позиционировать блоки без использования таблиц. В этом нам поможет свойство CSS: float и его значения (left, right).
Float – это свойство CSS для позиционирования элементов. Оно имеет 2 значения, left – выравнивание по левому краю и right – выравнивание по правому краю.
Итак начнем.
Для начала взглянем на картинку (или схему, как вам удобно), на которой изображен результат того, что у нас получится в конце данного урока:

Из рисунка видно, что у нас будет 2 блока (левый и правый), и главный контейнер, в который будут помещены эти 2 блока.

Шаг 1. Сначала сделаем HTML разметку. Структура очень проста. Она состоит из 3 блоков (основной, левый и правый блок). Итак так как у нас бестабличная верстка, то мы будем использовать элемент . Открываем нашу HTML – страницу (у меня она называется index.html, вы можете назвать как вам хочется), и прописываем в ней следующий код:

 

<div id="main-container">
<div class="left">
<p class="txt">Тут любой текст</p>
</div>
<div class="right">
<p class="txt"> Тут любой текст </p>
</div>
</div>

Как видно из кода, тут 3 контейнера. Главный контейнер имеет id = «main-container», в него помещены еще 2 блока, которые имеют классы .left (левый) и .right (правый). Так же тут еще есть и параграфы , которые имеют класс .txt. В параграфе вы можете написать абсолютно любой текст, это не имеет большего значения.

Если вы уже написали этот код, то переходим к второму шагу.

Шаг 2. Теперь что бы все это работало, нам нужно написать стили к данным блокам. Для этого создаем .CSS – файл (у меня он называется main.css), и подключаем его к странице. Напомню, что .CSS – файл подключается с помощью данного кода:

<link type="text/css" rel="stylesheet" href="styles/main.css" />

 

Прописываем в нашем .CSS – файле все стили, которые были использованы при разметке блоков, а именно id = «main-container», .left, .right и .txt. Ниже показан код для каждого класса:

#main-container {width: 960px; height: 320px; background: #dddddd; margin: 30px auto 10px auto; border: 1px solid #fff; box-shadow: 0px 0px 3px #a5a5a5;}

.left {width: 230px; background: #83d9f9; float: left; border: 1px solid #3b97b9; margin: 10px 5px 10px 10px;}

А вот в классе .left присутствует данное свойство CSS: float. Так как этот блок у нас должен располагаться слева, то ему мы придаем значение left. В коде это выглядит так float: left. Это значит, что блок будет располагаться слева.

.txt {font-family: Tahoma, Geneva, sans-serif; font-size: 13px; color: #000; margin: 10px 10px 10px 10px;}

Остальные свойства это размер, внешние отступы, внутренние отступы, цвет фона и т.п.

На этом все. Сохраняем .CSS – файл, и запускаем наш .HTML – файл. Смотрим что получилось. Если вы все сделали правильно, то у вас должно получиться все так же, как и на схеме:

Источник

Exit mobile version