Авторизация

Я в деле!

Новичок

4 урока

(50 минут)

Курс

Верстка адаптивной CSS галереи

В этом курсе мы разберем как сверстать адаптивную css галерею. Также познакомимся с Flexbox.

Верстка адаптивной CSS галереи с элементами разной высоты

Марта

2014

Автор урока:

Николай Чернобаев

комментария

лайков

В этом уроке мы рассмотрим еще одно тестовое задание на смекалку молодого верстальщика/front-end разработчика, а именно сверстаем адаптивную галерею с элементами разной высоты.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Галерея на CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<section id="photo-wall">
<ul>
<li>
<a href="">
<img src="img/1.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/7.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/8.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/9.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
<li>
<a href="">
<img src="img/10.jpg" alt="картинка">
<h3>Описание</h3>
<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</a>
</li>
</ul>
</section>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Галерея на CSS</title>

</head>

<body>

<ul>

<li>

<h3>Описание</h3>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

<li>

<h3>Описание</h3>

</a>

</li>

</ul>

</section>

</div>

</body>

</html>

.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}

.container ul li {
list-style:none;
float: left;
font: 10px/1.5 Verdana, Helvetica, Sans-serif;
width: 16%;
margin: 2% 2% 40px 2%;
}

.container ul li a {
color: #5d5f5d;
}

.container ul li a img {
max-width: 100%;
}

/* 100% - (5 * 4%) = 80% */
/* 80%/5 = 16% */

/* 100% - (4 * 4%) = 84% */
/* 80%/4 = 21% */

/* Media Queries */

@media only screen and (min-width : 941px) {
.container ul li:nth-child(5n+1){
clear:left;
}

}

@media only screen and (min-width: 721px ) and (max-width : 941px) {

.container ul li {
width: 21%;
}

.container ul li:nth-child(4n+1){
clear:left;
}

}

/* 100% - (3 * 4%) = 88% */
/* 88%/3 = 29.33333% */

@media only screen and (min-width: 531px ) and (max-width : 721px) {

.container ul li {
width: 29.33333%
}

.container ul li:nth-child(3n+1){
clear:left;
}

}

/* 100% - (2 * 4%) = 92% */
/* 92%/2 = 46% */

@media only screen and (min-width: 320px ) and (max-width : 531px) {

.container ul li {
width: 46%
}

.container ul li:nth-child(2n+1){
clear:left;
}

}

/* 100% - 4% = 96% */
/* 96% */

@media only screen and (max-width : 320px) {
.container ul li {
width: 96%
}
}

.container {

width: 80%;

margin: 30px auto;

overflow: hidden;

}

.container ul li {

list-style:none;

float: left;

font: 10px/1.5 Verdana, Helvetica, Sans-serif;

width: 16%;

margin: 2% 2% 40px 2%;

}

.container ul li a {

color: #5d5f5d;

}

.container ul li a img {

max-width: 100%;

}

/* 100% - (5 * 4%) = 80% */

/* 80%/5 = 16% */

/* 100% - (4 * 4%) = 84% */

/* 80%/4 = 21% */

/* Media Queries */

@media only screen and (min-width : 941px) {

.container ul li:nth-child(5n+1){

clear:left;

}

@media only screen and (min-width: 721px ) and (max-width : 941px) {

.container ul li {

width: 21%;

}

.container ul li:nth-child(4n+1){

clear:left;

}

/* 100% - (3 * 4%) = 88% */

/* 88%/3 = 29.33333% */

@media only screen and (min-width: 531px ) and (max-width : 721px) {

.container ul li {

width: 29.33333%

}

.container ul li:nth-child(3n+1){

clear:left;

}

/* 100% - (2 * 4%) = 92% */

/* 92%/2 = 46% */

@media only screen and (min-width: 320px ) and (max-width : 531px) {

.container ul li {

width: 46%

}

.container ul li:nth-child(2n+1){

clear:left;

}

/* 100% - 4% = 96% */

/* 96% */

@media only screen and (max-width : 320px) {

.container ul li {

width: 96%

}

adaptive css верстка

Материалы к уроку:

Делись:

Оставь комментарий!

2 thoughts on “Верстка адаптивной CSS галереи с элементами разной высоты”

rostyslav:

01.02.2016 в 17:11

Ще один цікавий урок.

Войдите, чтобы ответить
Tigrbl:

12.06.2016 в 06:29

интересная заморочка! так это как понял я, самое главное знать, где у тебя в написанном расположено то, что ты хочешь видоизменить… улётно то как)

Войдите, чтобы ответить

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.