6

Как сверстать 3 блока в относительных величинах, чтобы они имели одинаковые пропорции с 1920px до 1024px?

введите сюда описание изображения

5 ответов 5

3

Вариант с 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>

4
  • 1
    Зачем тут псевдоклассы? Commented 11 апр. 2018 в 12:32
  • 1
    @Vadizar, чтоб меньше лишних дивов было в разметке Commented 11 апр. 2018 в 12:50
  • Почему тогда в моих решениях нет лишних дивов и при этом CSS чистый? Commented 11 апр. 2018 в 12:53
  • 3
    @Vadizar, без понятия Commented 11 апр. 2018 в 13:00
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>

4
  • Это не то что хотел автор. Блоки не пропорциональны. Прочитайте вопрос хотя бы. Commented 11 апр. 2018 в 12:40
  • @Vadizar а, ну да проникся, добавил строчку. Commented 11 апр. 2018 в 12:48
  • Какой флекс? Сами же сказали, что на дворе 2018 - CSS Grid рулит! Commented 11 апр. 2018 в 12:58
  • @Vadizar согласен, вот, добавьте ответ, так сказать надо посвящать! Только вот grid уж больно смахивает на таблицу, я правда сказать не любитель сеток) Мне по догу службы раньше доставлались сайты с вёрсткой наполненной распрекрасными флоатами, абсолютами, псевдоэлементами, таблицами и прочими костылями: с этим счастьем совсем неприятно работать) Хорошо я больше по PHP :)) Commented 11 апр. 2018 в 13:11
3

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>

1

Вариант с высотой от ширины (не зависит от ширины броузера):

.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>

Идея отсюда

4
  • спасибо! Вариант с высотой от ширины подошел идеально Commented 11 апр. 2018 в 11:55
  • Какое-то костыльное решение. Commented 11 апр. 2018 в 12:10
  • @АлександрГруздев, отметьте ответ правильным, если вам он подошел Commented 11 апр. 2018 в 14:03
  • 1
    может и костыльное решение, но пропорции держит отлично. а с флексом не сложились медиа-запросы (большой блок пропадал когда запрос ставил ему width:100% или 100vw). особо не разбирался - использовал указанное решение Commented 11 апр. 2018 в 16:02
-1

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>

11
  • Работать то работает, но использование 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.