• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Сделать резиновый квадрат с контентом DIV на CSS (Как стилизовать div как отзывчивую площадку с контентом)
Сделать резиновый квадрат с контентом DIV на CSS
Kosten
Дата: Суббота, 24.02.2018, 11:40 | Сообщение 1
Администраторы
Сообщений:18250
Награды: 55


В этом мануале разберем как можно сделать ответную площадь или адаптивный квадрат, где внутри будет контент, и все с помощью CSS. Все очень просто, так как недавно столкнулся с такой ситуацией, а точнее с проблемой CSS. Мне нужно было создать квадратный элемент, который сохранил бы свою квадратную форму, поскольку он реагировал на изменение размера окна. Что думаю многим пригодится при адаптирование на сайте элементов. Здесь все очень просто, мы создаем квадрат или блок, чтоб в нем было описание, но главное, чтоб на всех мобильных носителях показывало корректно.

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

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

Давайте перейдем к созданию, так как оказалось это не сложно.

Это будет по умолчанию:



Здесь видим его сжатым, но описание внутри осталось на мести и не вылазит за рамки.



HTML

Код
<div class='zornet_ru_kerdsa'>
    <div class='adaptberskin'><div><span>ZorNet: Создание сайта на uCoz</span></div></div>
</div>

CSS

Код
.zornet_ru_kerdsa {
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #2e5fa0;
}
.zornet_ru_kerdsa:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.adaptberskin {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #f3efef;
}
.adaptberskin div {
   display: table;
   width: 100%;
   height: 100%;
}
.adaptberskin span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #fbf7f7;
    font-size: 17px;
    font-weight: bold;
}

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

Демонстрация:
Прикрепления: 0022865.png(4.2 Kb) · 8476774.png(2.8 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Сделать резиновый квадрат с контентом DIV на CSS (Как стилизовать div как отзывчивую площадку с контентом)
  • Страница 1 из 1
  • 1
Поиск: