Верстаем с помощью display, превращаем строчные теги в блочные
Здравствуйте! Сегодня будем говорить о расположении блоков в ряд (слева направо) и вертикально сверху вниз. Как это делать быстро и красиво.
По большому счету в html существует много вариантов расположения блочных элементов, но один из актуальных и элегантных на сегодня - это с использованием свойства display.
Итак если есть три блока например:
<div class="leftbar></div> <div class="content"></div> <div class="rightbar"></div>
Чтобы расположить их слева направо давайте будем использовать свойство display:inline-block
<style>
.leftbar,.content,.rightbar{
display:inline-block;
}
</style>
Тогда все они послушно встанут паровозиком и будут неплохо себя вести при изменении разрешения экрана. Это дает нам хорошую верстку главных родительских блоков при создании каркаса сайта
Если же какие-нибудь строчные теги наподобии <a href ></a> нужно расположить вертикально сверху вниз без оборачивания в блочные - то прибегаем к подобной схеме......
<a href="" class="mytegA">Helllo</a> <a href="" class="mytegA">Helllo</a> <a href="" class="mytegA">Helllo</a>
И превращаем их в блочные элементы - они автоматически начнут выстраиваться сверху вниз
<style>
.mytegA{
display: block;
}
</style>
Таким образом, мы имеем возможность манипулировать лубыми тегами, превращать строчные в блочные и наоборот - такой подход даст нам огромную экономию времени и количества кода.
-----------------------------------------------------------------------------
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
