Как сверстать 3 блока в относительных величинах, чтобы они имели одинаковые пропорции с 1920px до 1024px?
5 ответов
Вариант с flex-box:
.wrapper {
display: flex;
}
.wrapper:after {
content: '';
display:block;
margin-top: 50%;
}
.red {
background-color: red;
width: 50%;
}
.wrap-right {
display: flex;
flex-direction: column;
width: 50%;
}
.wrap-right:before,
.wrap-right:after {
content: '';
display:block;
width: 100%;
flex-grow: 1;
}
.wrap-right:before {
background-color: green;
}
.wrap-right:after {
background-color: blue;
}
<div class="wrapper">
<div class="red"></div>
<div class="wrap-right"></div>
</div>
-
1
-
1
-
Почему тогда в моих решениях нет лишних дивов и при этом CSS чистый? Commented 11 апр. 2018 в 12:53
-
3
Добавлю ещё короткое решение через flex
. Флекс использовать лучше всего, на дворе 2018 год: ничего так гибко и интуитивно не настраивается как флекс. Например можно указать min-height
у зелёного блока, и на определённом моменте ресайза окна он перестанет сужаться, а если размер контейнера ограничить по высоте - то что не влазит будет перескакивать из колонки в колонку.
body {
display: flex;
flex-flow: column wrap;
height: 50vw;
}
.red {
flex-basis: 100%;
flex-grow: 1;
background-color: red;
}
.green,
.blue {
flex-basis: 50%;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<body>
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</body>
-
Это не то что хотел автор. Блоки не пропорциональны. Прочитайте вопрос хотя бы. Commented 11 апр. 2018 в 12:40
-
-
Какой флекс? Сами же сказали, что на дворе 2018 - CSS Grid рулит! Commented 11 апр. 2018 в 12:58
-
@Vadizar согласен, вот, добавьте ответ, так сказать надо посвящать! Только вот grid уж больно смахивает на таблицу, я правда сказать не любитель сеток) Мне по догу службы раньше доставлались сайты с вёрсткой наполненной распрекрасными флоатами, абсолютами, псевдоэлементами, таблицами и прочими костылями: с этим счастьем совсем неприятно работать) Хорошо я больше по PHP :)) Commented 11 апр. 2018 в 13:11
html,
body {
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "box1 box2" "box1 box3";
}
#box1 {
background-color: green;
grid-area: box1;
}
#box2 {
background-color: red;
grid-area: box2;
}
#box3 {
background-color: blue;
grid-area: box3;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
Вариант с высотой от ширины (не зависит от ширины броузера):
.box {
position: relative;
width: 50%;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
.ratio1_2:before {
padding-top: 50%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.boxes>div {
width: 50%;
float: left;
color: #FFF
}
.boxes>div:nth-child(1) {
background: blue;
}
.boxes>div:nth-child(2) {
background: red;
}
.boxes>div:nth-child(3) {
background: green;
}
<div class="boxes">
<div class="box">
<div class='content'>Aspect ratio of 1:1</div>
</div>
<div class="box ratio1_2">
<div class='content'>Aspect ratio of 1:2</div>
</div>
<div class="box ratio1_2">
<div class='content'>Aspect ratio of 1:2</div>
</div>
</div>
Идея отсюда
-
спасибо! Вариант с высотой от ширины подошел идеально Commented 11 апр. 2018 в 11:55
-
-
@АлександрГруздев, отметьте ответ правильным, если вам он подошел Commented 11 апр. 2018 в 14:03
-
1может и костыльное решение, но пропорции держит отлично. а с флексом не сложились медиа-запросы (большой блок пропадал когда запрос ставил ему width:100% или 100vw). особо не разбирался - использовал указанное решение Commented 11 апр. 2018 в 16:02
1. Самый простой вариант:
body {
margin: 0;
}
div {
width: 50%;
height: 25vw;
float: left;
}
.red {
height: 50vw;
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
2. Самый продвинутый вариант:
body{
margin: 0;
}
.grid {
display: grid;
grid-template-areas: "a b"
"a d";
}
.red {
grid-area: a;
height: 50vw;
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="grid">
<div class="grid__item red">Grid Item 1</div>
<div class="grid__item green">Grid Item 2</div>
<div class="grid__item blue">Grid Item 3</div>
</div>
-
Работать то работает, но использование
float
сегодня, когда без него можно обойтись не меняя структуру, это ... Как и position впрочем) Commented 11 апр. 2018 в 12:21 -
какое-то кривое решение, а если отцентровынный сайт например в сетке бутстрепа? Commented 11 апр. 2018 в 12:24
-
@ArtemGorlachev использовать бутстрап - это само по себе костыльно. У меня представлено самое оптимальное решение, с нативными возможностями CSS. А вот у вас - явный костыль. Глупо это отрицать. Commented 11 апр. 2018 в 12:29
-
1@Vadizar я везде использую флексбокс, где есть намёки на колонки, уже года 2, и ничуть не жалею! С этим удобно потом работать, и заказчики не жалуются. Commented 11 апр. 2018 в 12:36
-
1@ГончаровАлександр а теперь посмотрите мой второй вариант. Commented 11 апр. 2018 в 12:52