Проблема с версткой. CSS

197

13 апреля 2018, 14:07

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

Answer 1

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

Answer 2

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

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

Идея отсюда

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

Answer 4

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>