Содержание

Как расположить несколько блоков div в ряд?

Одной из самых частых задач в вёрстке страницы — равномерное расположение блоков div по горизонтали с возможностью переноса на следующую строку. Для этого блоки нужно расположить в однин горизонтальный ряд. При этом, при масштабировании окна браузера они должны равномерно переноситься. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Как это сделать?

Располагаем n блоков div в горизонтальный ряд


Всё достаточно просто. Воспользуемся свойством float (выравнивание с обтеканием). Важно, чтобы минимальная ширина страницы/окна/родительского элемента позволяла вместить в себя как минимум два. Остальные блоки переносятся на следующую строку.

Как запретить обтекание блоков <div>


Бывает так, что одна строка может наехать на другую. Для этого отменим обтекание свойством clear. Зададим его для div, который будет размером по высоте в 1 пиксель и ширине 100%. При надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу.

Теперь к практике, примерам и исходникам…

Пример горизонтального расположения нескольких блоков <div>


Всем div мы присвоим параметр float:left. Для наглядности создадим 6 таких блоков:

DIV 1 DIV 2 DIV 3 DIV 4 DIV 5 DIV 6

   <!-- ------- установим стили блока DIV -------- -->

<style>

#line_block { 

        width:110px; 

        height:50px; 

        background:#f1f1f1; 

        float:left; 

        margin: 0 15px 15px 0; 

        text-align:center;

        padding: 10px;

        }

</style>

   <!-- ---------- вставим блоки на страницу --------- -->

<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->
 
<div id="line_block">DIV 1</div> 

<div id="line_block">DIV 2</div> 

<div id="line_block">DIV 3</div>

<div id="line_block">DIV 4</div>

<div id="line_block">DIV 5</div>

<div id="line_block">DIV 6</div>
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

Смотрим пример работы и скачиваем исходники: Демонстрация Скачать исходники

Рекомендую масштабировать страницу и посмотреть за поведением элементов.

Если задача состоит в том, чтобы расположить два больших блока в один ряд, то нужно float для них задать left для одного и right для другого. Опять же, ширина блоков не должна превышать ширину страницы/окна/родителя, иначе они перенесутся на следующую строку.

Спасибо за внимание! Удачи в вёрстке!

tradebenefit.ru

Основные приемы размещения блоков (div) горизонтально при помощи CSS.

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Размещение блоков горизонтально

Из чего выбрать или методы

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

  • метод «Float»
  • метод «Inline-block»
  • метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

строчные и блочные элементы

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.

CSS свойство

float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    </head>
    <body>
        <div>Строим</div>
        <div>горизонтальный</div>
        <div>ряд</div>
        <div>из дивов</div>
    </body>
</html>

И внешнюю таблицу стилей с следующим содержимым:

div {
     float: left; /*Задаем обтекание*/
     line-height: 120px;/*Высота строки +  верт. центрирования текста*/
     font-size: 40px;
     background: dodgerblue;
     color: white;
     margin-top: 60px;
     width: 320px; /*Фиксируем ширину блока*/
     margin-right: 10px;
     text-align: center; /*Центрируем текст по горизонтали*/
    }

В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:

размещение блоков float left

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

размещение блоков flooat right

Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили — выровнял по правому краю. Учтите этот момент при использовании свойства float: right.

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

<div></div>

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

HTML:

<div> <!--Создаем дополнительную обертку-родительский элемент -->
            <div>Строим</div>
            <div>горизонтальный</div>
            <div>ряд</div>
            <div>из дивов</div>
</div>

CSS:

 
.wrap {
         width: 1310px;/*фиксируем ширину обертки*/
         margin: 0 auto;/*центрируем ее*/
         background: darkgray;
         height: 120px;/*Задаем высоту обертки*/
        }
 
.bblock {
        float: left; /*Задаем обтекание*/
        line-height: 120px;/*Высота строки +  верт. центрирования текста*/
        font-size: 40px;
        background: dodgerblue;
        color: white;
        width: 320px; /*Фиксируем ширину блока*/
        margin-right: 10px;
        text-align: center; /*Центрируем текст по горизонтали*/
}
.wrap :last-child {
        margin-right: 0px;/*Убираем поле последнего div-а*/
                       }

В результате получаем такую картину:

центрированный Float left

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

Важно!!!

  1. Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

  2. При уменьшении размера родительского блока или окна веб-браузера, не вмещающиеся блоки перемещаются вниз друг под дружку. Чтобы исключить такой косяк, примените свойство min-width.
  3. Не забывайте указывать !DOCTYPE вашего документа, иначе, при отображении страницы в IE, применив описанный выше метод горизонтального размещения блоков, у вас появится отступ справа порядка 17px (наверное разработчики под скролл разметили).
  4. Во избежание различий отображения страницы в разных браузерах, некоторые веб-мастера рекомендуют задавать точные значения свойств margin и padding для body.
  5. В отличии от метода «Inline-block» вы не столкнетесь с наличием зазора между блоками при отсутствии margin-ов.
  6. Для задания отступов и полей при размещении элементов воспользуйтесь свойствами margin и padding.

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block.

display: inline-block

генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

  • высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
  • высота и ширина блока может быть задана фиксировано
  • Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

HTML:

        <div>
            <p><img src="./vaden-pro-logo.png" alt=""  /></p>
            <p><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 2</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 3</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 4</a></p>
        </div>

CSS:

.nav {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: 180px; /*задаем ширину блока*/
	background: dodgerblue;
        }
 
        .string {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

В результате получаем такую менюшку:

inline block

Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

display inline block

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!

Важно!!!

  1. При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
  2. Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
    HTML:
     <ul>
           <li>Зазор</li>
           <li>между</li>
           <li>блоками</li>
</ul>

    CSS:

    li {
        display: inline-block; 
   	width: 180px;
 	background: darkgrey;
        color: gold;
        line-height: 120px;
        font-size: 32px
        text-align: center;
        }

    Результатом рендеринга такого кода будет следующая картина:

    inline block зазор

    Есть несколько способов убрать зазоры:

    • подобрать отрицательные значения margin:
    • указать font-size: 0 для родительского блока и font-size ≠0 для инлайнового;
              ul { font-size: 0px;}
        li {font-size: 32px;}
    • не очень красиво, но все же… Написать код в одну строчку
      <li>Зазор</li><li>между</li><li>блоками</li>

    Результатом применения любого из выше перечисленных приемов будет следующая структура:

    inline block без зазора

  3. Если у вас несколько блочно-строчных элементов подряд имеют разную высоту, то им необходимо задать свойство vertical-align: top. Напомню, что по умолчанию vertical-align присвоено значение baseline.
  4. Кросс-браузерность.
  • Для древних версий Firefox добавляем строчку:
    display: -moz-inline-stack;

    и оборачиваем элемент в дополнительную div-обертку.
  • IE 7 и более ранние версии — добавляем строчки:
     zoom: 1; /*задаем hasLayout*/
*display: inline; /*звездочка – хак для IE */
_height: 250px; /*в IE6 не работает min-height*/
  • Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные — IE).

 

Метод «Table»

Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

<div>
  <div>Строим</div>
  <div>табличный</div>
  <div>ряд</div>
  <div>из дивов</div>
  </div>
.bblock {
	display: table-cell; 
        font-size: 32px;
  	width: 200px;
        height: 200px;
	background: gold;
        text-align: center;
        vertical-align: middle;
}
 
.wrap {
  display: table;  
  border-spacing: 20px 20px; 
  background-color: darkgray;
}

Важно!!!

  1. В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
  2. У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
  3. Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа

.

Оценок: 35 (средняя 4.5 из 5)

vaden-pro.ru

Как сделать в css блоки в линию? Основные способы

Как сделать с помощью css блоки в линию?

От автора: я приветствую вас. Необходимость представить несколько блоков на веб-странице в одну линию — очень частая задача, которая возникает перед верстальщиками. Она возникает при верстке практически каждого шаблона, поэтому всем нам в любом случае нужно знать и применять основные способы изменения поведения блоков.

Прежде чем мы посмотрим самые распространенные приемы, хотел бы вспомнить немного теории. Элементы веб-страницы делятся на блочные и строчные. И разница между ними очень проста — строчные могут располагаться в одну строку, а блочные — нет. Конечно, на этом различия не заканчиваются, но это основное отличие. Уже у блоков могут быть отступы сверху и снизу (у строчных — нет), а также к ним можно применять больше свойств.

Основные способы выстроить в css блоки в ряд

Есть мы не будем ничего усложнять, есть 3 основных способа:

Преобразовать блоки в строчные элементы. При этом блочные свойства теряются, поэтому этот вариант практически никогда не используется

Сделать нужные элементы блочно-строчными. Это специальный тип, при котором элемент сохраняет свои свойства, но в то же время позволяет другим блокам расположиться рядом.

Как сделать с помощью css блоки в линию?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сделать элементы плавающими с помощью свойства float.

На этих вариантах остановимся. Флексбокс, табличное отображение и другие моменты рассматривать не будем. Итак, пускай у нас есть 3 подзаголовка.

<h4>Заголовок 1</h4> <h4>Заголовок 2</h4> <h4>Заголовок 3</h4>

<h4>Заголовок 1</h4>

<h4>Заголовок 2</h4>

<h4>Заголовок 3</h4>

Естественно, все css-свойства нужно прописывать в отдельном файле (style.css), который нужно подключить к html-документу. В этот файл я запишу минимальный стиль, чтобы просто было видно наши подзаголовки.

h4{ background: #EEDDCD; }

h4{

background: #EEDDCD;

}

Вот они на странице:

Как сделать с помощью css блоки в линию?

Есть они ведут себя как блоки. Кадый располагается на своей строке, между ними есть отступы. При желании также вы можете задать какие-угодно внутренние отступы и вообще сделать что угодно.

Преобразуем в строки и сразу добавим внутренние отступы. Для этого селектору h4 нужно добавить такие свойства:

display: inline; padding: 30px;

display: inline;

padding: 30px;

Как сделать с помощью css блоки в линию?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как сделать с помощью css блоки в линию?

Как видите, отступы применились не совсем корректно, это как раз потому, что мы имеем дело со строками. Если изменить отображение на блочно-строчное, отступы добавятся корректно. Для этого всего лишь меняем значение свойства:

Как сделать с помощью css блоки в линию?

Есть 2 основные проблемы, которые возникают при использовании этого приема. Первая — это минимальный отступ. Образуется он из-за того, что в коде между блоками есть один пробел, который и образует этот отступ. Если эта проблема нуждается в решении, есть 2 основных варианта:

В html расположить код нужных блоков в одну линию без пробелов

Проставить отрицательный внешний отступ справа -4 пикселя. Именно столько занимает один пробел.

Вторая проблема — при разной высоте элементов могут возникать проблемы с отображением. В общем, наилучший вариант — плавающие блоки. Вместо display: inline-block пишем вот что:

Как сделать с помощью css блоки в линию?

И все наши заголовки третьего уровня теперь будут прижиматься к левому краю. Соответственно, также можно прижать их и к левому. При использовании этого приема вышеописанных проблем не возникает изначально.

Единственное, за чем вы должны следить в таком случае — отмена обтекания. Следующему блоку после плавающих нужно поставить свойство clear:both, чтобы он не пытался обтекать эти блоки, а расположился ниже, как и положено.

Блоки в линию с использованием фреймворка

Сразу скажу, что если вы собираетесь использовать любой нормальный css-фреймворк (например, Bootstrap) то там все еще гораздо проще. Весь css-код, отвечающий за расстановку элементов, уже написан и вам останется лишь задан правильные классы. Для этого достаточно изучить систему сетки, и вы сможете делать многоколоночные адаптивные шаблоны без особых трудностей. По крайней мере, это будет значительно проще, чем при написании css с нуля.

Еще одна проблема написания кода с нуля возникает как раз когда вам нужен адаптивный дизайн. Конечно, его можно реализовать самостоятельно, владея медиа-запросами, но это будет намного сложнее, если у вас сложный шаблон.

Например, когда у вас на больших экранах должно быть 4 колонки, на средних — 3, а на мобильных телефонах — 2. С помощью таких фреймворков, как Bootstrap, а точнее с помощью его сетки, реализовать подобное — дело буквально нескольких минут.

Плавно переводя тему на фреймворк Bootstrap, в очередной раз отмечу, что если перед вами стоит задача сверстать сложный адаптивный шаблон, то просто грех не воспользоваться сеткой. Для этого даже не обязательно подключать полную версию фреймворка – его можно кастомизировать и остановить там только то, что действительно вам нужно.

Научиться работать с фреймворком вы сможете с помощью нашего платного курса. Там объясняется и теория, но самое главное – есть практика. Вы сверстаете 3 адаптивных шаблона и получите отличный опыт, который позволит верстать сайты на заказ или для себя. А если вы хотите бесплатно ознакомиться с преимуществами и возможностями фреймворка, предлагаю вам просмотреть нашу серию статей по Bootstrap, а также бесплатный мини-курс по верстке простого макета. Желаю вам успехов в верстке и сайтостроении в целом.

Как сделать с помощью css блоки в линию?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Как сделать с помощью css блоки в линию?

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Как расположить несколько блоков в ряд — сайт на PHP своими руками

Как расположить несколько блоков div в ряд? Как запретить обтекание блоков <div>?

Очень часто приходится расположить несколько блоков <div> в однин ряд в горизонтальной плоскости. Например один блок <div> слева, а другой справа и чтобы они были в одном потоке чтения браузером. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Или при создании горизонтального меню, нужно пункты расположить в ряд. Одним словом — нужно позиционировать блоки <div>.

Делается это очень просто, при помощи параметра float:…;, которым будем задавать обтекание блока справа, или слева, кому что нужно. Один важный момент — при таком позиционировании нескольких блоков <div>, нужно чтобы общая ширина страницы была больше суммы ширины блоков, иначе блоки будут один под другим, хотя и с разных сторон окна!!!

Как запретить обтекание блоков <div>

При позиционировании блоков, часто случается так, если разрешено обтекание, то текст может подскакивать вверх, или между блоками смещаться. Решается такая проблема созданием блока с запретом обтекания со всех сторон. Такой div нужно сделать размером по высоте в 1 пиксель и ширине 100%.

.

И при надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу, которые нужно расположить в ряд.

Пример горизонтального расположения нескольких блоков <div>

Для такого расположения блоков — всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков <div> по горизонтали:

DIV — 1

DIV — 2

DIV- 3

DIV — 4

DIV — 5

DIV — 6


——- установим стили блока DIV ———
#liniya {
width:110px;
height:50px;
background:#669900;
float:left;
margin-left:15px;
text-align:center;
}
———- вставим блоки на страницу ———

.

чтобы не лезли вверх

DIV — 1

DIV — 2

DIV- 3

DIV — 4

DIV — 5

DIV — 6

чтобы ничего не влезало снизу

Если нужно расположить два больших блока в один ряд, тогда нужно параметрам float:…; задать значения left для одного и right для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!!!

kapon.com.ua

Блоки и изображения в ряд. float, display

Для того, чтобы разместить элементы в ряд есть несколько способов. 1. float:left Во-первых float:left — он указывает на то, что элемент с таким css — свойством остальные элементы должны обтекать справа, а сам этот элемент будет прижиматься к левому краю. Внимание: элемент с таким свойством будет считать строчным. И может быть размещён посредине строки. Пример:

1

2

3

4

5

6

7

8

9

<html>

<head>

</head>

<body>

    текст<div>Первый блок</div>текст

    <div style="float:left">Второй блок</div>

    <div>Третий блок</div>текст

</body>

</html>

В таком случае первый элемент займет всю ширину страницы. Второй блок займет крайнее левое положение и, так как он считается текстом, то займет только то пространство, необходимое для текста блока. Третий блок встанет справа от второго и займет всё оставшееся место справа (т.к. он блочный, как и первый блок) текст

Первый блок

текст

Второй блок

текст

Третий блок

текст Иногда высота этих элементов определяется неправильно. Этого поможет избежать родительский элемент со свойством overflow:hidden;

1

2

3

4

5

<div style="overflow:hidden">

    текст<div style="border:1px solid #eee;">Первый блок</div>

    <div style="border:1px solid #eee;float:left;">Второй блок</div>

    <div style="border:1px solid #eee;">Третий блок</div>текст

</div>

В целом можно заметить, что верстка с помощью float:left неаккуратна. 2. display:inline-block Ещё один способ разместить элементы в ряд — display:inline-block. Несколько блоков подряд с таким свойством будут размещены в одну линию. Также в линию с блоками добавляется и текст: asd

Первый блок

asd

Второй блок

asd

Третий блок

asd

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

<head>

    <meta charset="UTF-8">

    <style>

    div.block{

        display:inline-block;

        padding:25px;

        margin:15px;

    }

    div.block:hover{

        margin:5px;

        padding:35px;

    }

    </style>

</head>

<body>

    asd<div class="block" style="background:#faa">Первый блок</div>asd

    <div class="block" style="background:#ffa">Второй блок</div>asd

    <div class="block" style="background:#aff">Третий блок</div>asd

</body>

</html>

Примечание: нет разницы какие блоки нужно выравнивать в линию. Таким способом одинаково выравниваются, и div-блоки, и img, span, textarea и д.р. Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне [email protected]

gohtml.ru

Как разместить два слоя с заданной шириной рядом по горизонтали?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Разместить рядом по горизонтали два блочных элемента фиксированной ширины.

Решение

Слой, создаваемый через тег <div>, является блочным элементом веб-страницы. Это означает, что по ширине слой занимает все доступное пространство и всегда начинается с новой строки. Поэтому ограничение ширины слоев никак не приведет к тому, что блоки станут располагаться рядом. Для нашей цели следует воспользоваться стилевым свойством float со значением left. Это свойство превращает блочный элемент в плавающий, что в свою очередь приводит к выравниванию слоя по левому краю и его обтеканию другими элементами по правому краю. На деле же слои при подобной манипуляции выстраиваются не друг под другом как обычно, а рядом по горизонтали. Но только в том случае, когда ширина слоев задана через свойство width, как показано в примере 1.

Пример 1. Слои заданной ширины

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Слои по горизонтали</title>
  <style>
   .layer1 {
    background-color: #fc0; /* Цвет фона слоя */
    padding: 5px; /* Поля вокруг текста */
    float: left; /* Обтекание по правому краю */
    width: 200px; /* Ширина слоя */
   }
   .layer2 {
    background-color: #c0c0c0; /* Цвет фона слоя */
    padding: 5px; /* Поля вокруг текста */
    width: 300px; /* Ширина слоя */
    float: left; /* Обтекание по правому краю */
   }
   .clear {
    clear: left; /* Отмена обтекания */
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh  
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit  
    lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. 
  </div>
  <div></div>
   <p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate 
   velit esse molestie consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Слои, располагающиеся по горизонтали с помощью float

Данный пример работает только для слоев, у которых ширина задана явно в процентах или пикселах через свойство width. Чтобы обтекание не распространялось дальше на последующие элементы, необходимо применить свойство clear, оно отменяет действие float. В примере для этой цели создается «пустой» элемент <div>.

При уменьшении размеров окна браузера до определенной величины, слои сверстанные по указанной методике перестают располагаться по горизонтали и «перескакивают» вниз друг под друга (рис. 2). Чтобы этого не происходило, воспользуйтесь стилевым свойством min-width.

Рис. 2. Сдвиг слоев при уменьшении окна браузера

htmlbook.ru

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.

Группа блоков внутри родительского блока:

<div> <div>Текст текст текст текст текст текст</div> <div>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div> <div>Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст</div> <div>Тексттекст текст текст</div> </div>

<div>

<div>Текст текст текст текст текст текст</div>

<div>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div>Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div>Тексттекст текст текст</div>

</div>

Пусть будет известно, что будут располагаться блоки в одну строку и их количество будет равно 4-м, зная это можно рассчитать ширину блоков и отступов между ними в относительных величинах — в процентах.

Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.

Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.

Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.

Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.

CSS определяющий ширину блока и отступ справа:

.parent > div { background: #eee; float: left; width: 23.5%; margin-right: 2%; }

.parent > div {

    background: #eee;

    float: left;

    width: 23.5%;

    margin-right: 2%;

}

Данный код означает следующее: все блоки DIV, являющиеся первым вложением в блок с классом parent должны обладать следующими свойствами: Цвет фона — серый, ширина блока — 23,5%, внешний отступ справа — 2% и размещение блока — слева.

При таком написании получается, что каждый блок имеет отступ, а нам необходимо, чтобы отступ был у всех, кроме последнего, так как иначе не получается расположить блоки в одну строку, поэтому нужно добавить дополнительное описание.

Обнуление отступа для последнего дочернего элемента группы:

.parent > div:last-child { margin-right: 0; }

.parent > div:last-child {

    margin-right: 0;

}

Теперь отступы будут иметь все дочерние блоки, кроме последнего.

Если в каждом блоке написать какой-либо текст, то он прилипнет к границам блока, что не очень красиво, следовательно нужно сделать внутренний отступ, например равный 10px, а для того, чтобы подчеркнуть, что блоки являются отдельными, нарисуем им границы.

CSS примет следующий вид:

.parent > div { background: #eee; float: left; width: 23.5%; margin-right: 2%; padding: 10px; border: 1px solid #ccc; }

.parent > div {

    background: #eee;

    float: left;

    width: 23.5%;

    margin-right: 2%;

    padding: 10px;

    border: 1px solid #ccc;

}

В этом случае блоки в одну строку снова перестанут умещаться, так как по умолчанию внутренние отступы и границы влияют на ширину блока увеличивая ее. То есть если блок имел ширину 23,5%, то после нововведений он будет иметь ширину  23,5% + 2 * 10 + 2 * 1 — ширина самого блока плюс ширина отступа с каждой стороны, плюс ширина рамки с каждой стороны. Чтобы ширина блока считалась с учетом внутренних отступов и рамок необходимо использовать свойство box-sizing.

CSS с указанием, что ширина блока должна учитывать внутренние отступы и границы:

.parent > div { background: #eee; float: left; width: 23.5%; margin-right: 2%; padding: 10px; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.parent > div {

    background: #eee;

    float: left;

    width: 23.5%;

    margin-right: 2%;

    padding: 10px;

    border: 1px solid #ccc;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

Результат — блоки в одну строку:

oiplug.com

No related posts.