Здравствуйте. Есть вот такая секция(скрин ниже). Как лучше исспользовать список или просто блокам float: left; прописать? Бог с ним с этим выравниванием. У меня другая проблема. Блоки изначально идут:
картинка-1 текст-1 картинка-3
текст-2 картинка-2 текст-3;
ul{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
float: left;
}
.item{
width: 200px;
height: 200px;
border: 1px solid black;
}
-
картинка - 1
-
текст - 1
-
картинка - 3
-
текст - 2
-
картинка - 2
-
текст -3
Как сделать так чтобы при уменьшении размера экрана в 2-е колонки было так:
картинка-1 текст-1 картинка-2 текст-2 картинка-3 текст-3
И в одну
картинка-1 текст-1 картинка-2 текст-2 картинка-3 текст-3
Ответ
Можно реализовать с помощью flexbox. Сделайте пример на весь экран, изменяйте ширину окна и увидите изменения. В написании css использован метод mobile first, но вы можете это сделать по-другому в зависимости от вашего подхода progressive enhancement или graceful degradation.
.container {
display: flex;
flex-flow: column wrap;
width: 300px;
}
.image,
.text {
width: 300px;
}
.image { background: lightgreen; }
.text { background: lightblue; }
@media (min-width: 500px) {
.container {
flex-flow: row wrap;
width: 500px;
}
.image,
.text {
width: 250px;
}
}
@media (min-width: 900px) {
.container {
width: 900px;
}
.image,
.text {
width: 300px;
}
}
Ссылки:
Полное руководство по Flexbox (рус.)
Mobile first (рус.)
Graceful Degradation (рус.)
Progressive Enhancement (рус.)
Комментариев нет:
Отправить комментарий