Адаптивные div блоки: html — Как сделать такие адаптивные блоки?

Float CSS: что это такое и как работают адаптивные блоки Div в CSS?

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

 

Свойство float

Суть float заключается в том, чтобы «прижать» определенный компонент страницы влево или вправо, «вырвав» его из общего потока элементов. Данное свойство дает возможность float-элементу быть обтекаемым другим контентом. Если провести аналогию, то это как в печатной газете, когда есть столбец, в столбце есть некое изображение, которое «обтекает» печатный текст. То же происходит и с элементами HTML на странице, если к ним применить свойство float.

 

Значения свойства float

Свойство float может принять 4 значения:

1. Left. Компонент будет прижат влево, а контент его будет обтекать справа.
2. Right. Компонент будет прижат вправо, а контент его будет обтекать слева.
3. None. Компонент не выравнивается, это значение по умолчанию.
4. Inherit. Значение компонента наследуется от «родителя».

Самыми популярными значениями являются «влево» и «вправо». Пример синтаксиса:

#floatelement {

float: right;

}

 

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

#floatelement {

float: right;

width: 265px;

}

 

Проблемы со свойством float

Одной из проблем является неправильное обтекание или когда вообще не нужно обтекание элемента. В этих случаях может помочь свойство clear, которое способно «убрать» обтекание слева, справа или слева и справа разом. Clear может приобретать следующие значения:

1. Left. Будет отменять обтекание слева.
2. Righ. Будет отменять обтекание справа.
3. Both. Будет отменять обтекание слева и справа.
4. None. Не будет отменять обтекание, это обозначение по умолчанию.

Второй по значимости проблемой является «выпадание» float-элемента из родительского блока. Это происходит потому, что float-элемент никак не воздействует на родительский элемент. Поэтому если мы его делаем больше размера «родителя», то он просто «выйдет» из его размеров.

Есть несколько вариантов решить эту проблему:

1. Сделать родительский контейнер тоже float. Это самый простой способ, но в некоторых случаях он может внести нежелательные возможности общего макета.
2. Добавить дополнительную разметку. Это тоже простой способ. Все, что нужно сделать, — это в контейнер родителя в нижней части добавить другой контейнер и «опустошить» его. Минус этого метода — он добавляет ненужный код вашей разметке, поэтому если смотреть со стороны чистоты кода, то не стоит его применять.
3. Использовать свойство overflow: hidden или auto для родительского контейнера. Это самый эффективный и самый лучший способ разрешить проблему «выпадания».

 

Заключение

Свойство float — это довольно интересный инструмент в верстке макетов. Очень часто оно применяется, когда нужно сделать горизонтальное меню или галерею фотографий в неупорядоченном виде.

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

Схожие статьи

Что это — stdin, stdout и stderr?

Проверка равенства двух массивов в PHP

Кто такой веб-разработчик.

Как завершить сеанс PHP через 30 минут?

Адаптивный CSS3 Manasory без JavaScript

Адаптивные html-блоки в виде кирпичной кладки с помощью CSS3

Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Googl+. Ну, а законодателями и зачинателями сего действа стали «мягкотелые», когда выпустили в свет Windows8, где как раз и были впервые использованы плитки с логотипами приложений и кратким содержанием. Конечно такая метода применялась и раньше, но всё больше в виде экспериментов разработчиков-энтузиастов.

Существуют различные способы реализации компактных html-блоков с содержанием в виде кирпичной кладки, самый распространенный, это использование специализированных плагинов jQuery, например скрипт David’a DeSandro, который так и называется Masonry (кирпичная кладка). Развернутый мануал по установе, настройке и работе скрипта написал в своё время Kama, кому интересно можете изучить подробно.

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

HTML структура

  
<!-- Контейнер с адаптиными блоками -->
<div>
    <!-- Адаптивные блоки с содержанием -->
   <div>
       <img src="http://placehold.it/350x200">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div>
       <img src="http://placehold.it/250x250">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео. .. <a href="###">Подробнее »</a>
    </div>
 
   <div>
       <img src="http://placehold.it/470x320">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div>
       <img src="http://placehold.it/250x150">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div>
       <img src="http://placehold.it/300x250">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div>
       <img src="http://placehold.it/450x300">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео.
 
  .. <a href="###">Подробнее »</a>
    </div>
 
    <div>
       <img src="http://placehold.it/250x200">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
   <div>
       <img src="http://placehold.it/250x150">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
    <div>
       <img src="http://placehold.it/250x150">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
 
    <div>
       <img src="http://placehold.it/280x190">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео.
   .. <a href="###">Подробнее »</a>
    </div>
 
    <div>
       <img src="http://placehold.it/500x400">
           <br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="###">Подробнее »</a>
    </div>
    <!-- Конец адаптивных блоков с содержанием -->
 
</div>
    <!-- Конец контейнера с адаптивными блоками -->
  

Контейнеры, в которых размещается необходимый контент, оформлены с помощью свойств css3 в виде прямоугольных плиток, с лёгкой наружной тенью box-shadow и изменениями алгоритма расчета ширины и высоты элемента box-sizing, с присвоенным значением border-box.

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

  
/* ------------- Контейнер с адаптивными блоками------------- */
.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; /* Общее расстояние между колонками */
    font-size: .85em;
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}
 
/* Элементы в виде плиток с содержанием */
.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */ 
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ 
    box-shadow: 2px 2px 4px 0 #ccc; /* Внешняя тень плиток */
}
 
/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img, iframe {
max-width: 100%;
height: auto;
display: block;
}
 
/* Стили ссылок внутри плиток */
.  item a {
text-decoration: none;
color: #359CC6;
margin: 0 10px;
}
 
/* Стили ссылок при наведении */
.item a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}
 
/* Медиа-запросы для различных размеров адаптивного макета */
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
 
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
 
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
 
@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
 
@media only screen and (min-width: 1280px) {
    . wrapper {
        width: 1260px;
    }
}
  

Где применять такой способ вывода информации? Да где угодно. У вас на блоге или сайте, есть рубрики(категории), заделайте представительную картинку, соответствующую тематике категории, добавьте небольшое описание, приправьте всё это ссылочкой на страницу этой самой рубрики, и разместите всё это дело на главной странице. Или же, организуйте вывод новостей, кратких анонсов самых свежих записей блога, описание товаров в интернет магазинах и т.д. и т.п. Вариантов использования данного метода масса. Вот только как-то у самого ещё руки не дошли, реорганизовать структуру своего блога. Надеюсь, те кому приглянулся этот способ, будут порасторопнее меня и используют адаптивные боки в виде плиток на своих новых и уже работающих интернет-проектах.

• 2.8
• 1
• 2
• 3
• 4
• 5

Голосов: 993 | Просмотров: 4883

Как сделать HTML-элемент div адаптивным с помощью CSS?

Улучшить статью

Сохранить статью

• Уровень сложности: Easy
• Последнее обновление: 30 сен, 2020

Улучшить статью

Сохранить статью

С помощью CSS Media Query можно сделать HTML-элемент «div» адаптивным. Медиа-запросы позволяют пользователям изменять или настраивать веб-страницы для многих устройств, таких как настольные компьютеры, мобильные телефоны, планшеты и т. д., без изменения разметки. С помощью медиа-запроса пользователь может изменить стиль того или иного элемента для разных размеров экрана.

Правило CSS @media состоит из типа носителя и может иметь одно или несколько выражений, результатом которых могут быть такие значения, как «истина» или «ложь».

Синтаксис:

@media не|только медиатип и (выражения) {
    // Ваши CSS-коды
}
 

Следующий элемент meta viewport должен быть включен в раздел «head» HTML-файла, чтобы адаптивная веб-страница работала.

Пример: В следующем примере все три HTML-блока «div» выровнены по горизонтали. Но всякий раз, когда размер экрана уменьшается ниже «500 пикселей», все три блока автоматически выравниваются по вертикали. Свойство width для элемента «div» в запросе @media для размера экрана установлено меньше или равно «500px».

 основной {
  максимальная ширина: 1024 пикселей;
  маржа: авто;
}
.блоккен {
  дисплей: гибкий;
  flex-wrap: обернуть;
  flex-направление: столбец;
  максимальная высота: 1200 пикселей;
  выравнивание содержимого: растянуть;
}
Экран @media и (минимальная ширина: 1024px) {
  .блоккен {
    flex-направление: строка;
  }
}
.письмо {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  поле: 5px;
  цвет фона: #eee;
  граница: 5px сплошной черный цвет;
  семейство шрифтов: без засечек;
  размер шрифта: 5em;
  черный цвет;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
  радиус границы: 25%;
  переполнение: скрыто;
} 

 

<голова>
  <мета-кодировка="UTF-8">
  
   0">
  
  

<тело>
  <основной>
     
Письменные блоки
 
    <дел>
      
Л
      
О
      
Я
      
Л
      
О
      
Я