Доступно про float: left і як рівномірно розмістити блоки div на CSS
- блокові (blok), які займають всю ширину, де знаходяться, і відокремлені від того, що над і під ними. Наприклад, це теги DIV, P, H.
- вбудовані (inline). Наприклад, SPAN, STRONG, EM, A і IMG.
Раніше розмітка сторінок здійснювалася за допомогою таблиць.
роль властивості float зросла після переходу з table-верстки на div-верстку. Це пояснюється тим, що float дозволяє веб-розробнику включати стовпці не вдаючись до таблиці. Воно може приймати значення right, left, але не center.
<Div> <p> Раніше розмітка сторінок здійснювалася за допомогою <strong> таблиць </ strong>. </ P> <p> Роль властивості <a href="#"> float </a> зросла після переходу з table-верстки на div-верстку. Це пояснюється тим, що float дозволяє веб-розробнику включати стовпці не вдаючись до таблиці. Воно може приймати значення <em> right </ em>, <em> left </ em>, але не <em> center </ em>. </ P> </ div>За допомогою властивості display: block; або display: inline; ми перетворимо один тип прямокутника в інший. Наприклад, список UL, який має ряд блоків LI, можна розташувати горизонтально:
- ПУНКТ
- ПУНКТ
- ПУНКТ
- ПУНКТ
- ПУНКТ
- ПУНКТ
При використанні властивості float прямокутник є блоковим, але з характерною особливістю: його ширина не поширюватиметься на весь вміст. Наприклад, заголовок h3 виглядає як:
це HEADER h3
Якщо йому задати властивість display: inline ;, то ми побачимо, що змінилася не тільки ширина, але і відстань над і під елементом:
це HEADER h3
Але якщо я хочу розмістити елемент праворуч і додам на цей раз text-align: right ;, то ми отримаємо:
це HEADER h3
І зовсім інакше, якщо float: right ;. Зверніть увагу, що відстань над і під елементом залишилися незмінними:
це HEADER h3
А як поведуть себе елементи, що знаходяться поруч з заголовком?
Верхній текст залишається незмінним, оскільки плаваючий елемент не може розташовуватися вище рядки, в якій він був створений.
це HEADER h3
А ось червоний текст знаходиться під заголовком і він буде його обтікати, не маючи при цьому ніяких додаткових стилів. І тільки висота h3 буде подолана, сторінка повернеться до природного порядку.
А Б В Г Кілька плаваючих елементів будуть дотримуватися послідовність свого розташування.
<P> <span style = "float: left;"> А </ span> <span style = "float: right;"> Б </ span> <span style = "float: left;"> В </ span > <span style = "float: right;"> Г </ span> текст ... </ p>
А вирівнювання проводиться по самому нижньому краю тих букв, які знаходяться на одній стороні.
А Б В Г Якщо ми ходимо, щоб обтікання елемента було припинено з певного моменту (звідси), застосовується властивість clear. Його ми можемо додати в порожній тег <div style = "clear: both;"> </ div>
Для того, щоб рівномірно розмістити кілька блокових прямокутників, задамо їм однакову ширину.
блок 1
блок 2
блок 3
блок 4
<Div style = "width: 100%; float: left;"> <div style = "float: left; width: 25%;"> Блок 1 </ div> <div style = "float: left; width: 25 %; "> Блок 2 </ div> <div style =" float: left; width: 25%; "> Блок 3 </ div> <div style =" float: left; width: 25%; "> Блок 4 </ div> </ div> <div style = "clear: both;"> </ div> А де відстань між блоками? якщо задати відступи margin і padding , То через те, що плаваючим елементам не вистачатиме простору, вони будуть зміщуватися вниз.блок 1
блок 2
блок 3
блок 4
<Div style = "width: 100%; float: left;"> <div style = "float: left; width: 25%; margin: 10px; padding: 10px;"> Блок 1 </ div> <div style = "float: left; width: 25%; margin: 10px; padding: 10px;"> Блок 2 </ div> <div style = "float: left; width: 25%; margin: 10px; padding: 10px;"> блок 3 </ div> <div style = "float: left; width: 25%; margin: 10px; padding: 10px;"> блок 4 </ div> </ div> <div style = "clear: both;" > </ div> Питання вирішується шляхом додавання ще одного DIV:<Div style = "width: 100%; float: left;"> <div style = "float: left; width: 25%;"> <div style = "margin: 10px; padding: 10px;"> Блок 1 < / div> </ div> <div style = "float: left; width: 25%;"> <div style = "margin: 10px; padding: 10px;"> Блок 2 </ div> </ div> <div style = "float: left; width: 25%;"> <div style = "margin: 10px; padding: 10px;"> Блок 3 </ div> </ div> <div style = "float: left; width: 25%; "> <div style =" margin: 10px; padding: 10px; "> Блок 4 </ div> </ div> </ div> <div style =" clear: both; "> </ div>
Таблична верстка дуже зручна і зрозуміла, напевно, тому з'явився її аналог display: table ;. Та ж форма виходить при меншому використанні коду.
блок 1
блок 2
блок 3
блок 4
<Style type = "text / css"> .tablica {display: table; width: 100%; border-spacing: 10px 10px; } .Yacheika {display: table-cell; padding: 10px; } </ Style> <div class = "tablica"> <div class = "yacheika"> Блок 1 </ div> <div class = "yacheika"> Блок 2 </ div> <div class = "yacheika"> Блок 3 </ div> <div class = "yacheika"> Блок 4 </ div> </ div>, де border-spacing визначає горизонтальне і вертикальне відстань між кордонами осередків.Тепер видно яким чином будується галерея зображень. код картинок , Сподіваюся, ніхто не забув.
<Div class = "konteiner"> <div class = "yacheika"> <img src = "адрес_ізо" /> <br> Блок 1 </ div> <div class = "yacheika"> <img src = "адрес_ізо" / > <br> Блок 2 </ div> <div class = "yacheika"> <img src = "адрес_ізо" /> <br> Блок 3 </ div> <div class = "yacheika"> <img src = "адрес_ізо "/> <br> Блок 4 </ div> </ div>
І останнє, що хочеться показати - ситуацію, коли потрібно досягти обтікання зображення з двох сторін. Власне кажучи картинка відповідає моєму настрою, коли мені все ж вдалося домогтися цього ефекту.
# Imagen-center {margin-left: -60px;} дорівнює # texto-L: before, # texto-R: before {width: 60px;} і становить половину ширини зображення плюс 10px. # Texto-R: before {height: 110px;} дорівнює висоті зображення + 10px.
<Style type = "text / css"> # contenedor-center {margin: 0 auto; position: relative; width: 620px; text-indent: 0px;} # imagen-center {position: absolute; top: 0; left: 50%; margin-left: -60px; } # Texto-L, # texto-R {width: 49%;} # texto-L {float: left;} # texto-R {float: right;} # texto-L: before, # texto-R: before {content: ""; width: 60px; height: 110px;} # texto-L: before {float: right;} # texto-R: before {float: left;} # contenedor-center p {margin: 0;} </ style> <div id = "contenedor -center "> <img id =" imagen-center "src =" http://4.bp.blogspot.com/-yrI7Ea0IoX8/TcEkmd-f3qI/AAAAAAAAB2g/7YkRIG6kKGs/s100/happy-blogger.jpg "> <div id = "texto-L"> <p style = "text-align: right;"> текст ... </ p> </ div> <div id = "texto-R"> <p style = "text- align: left; "> текст ... </ p> </ div> </ div> <div style =" clear: both; "> </ div>Посилання на джерела: www.alistapart.com , softwaremaniacs.org , vagabundia.blogspot.com , www.smashingmagazine.com .