css: взаимное расположение блоков

219

31 мая 2018, 02:00

есть код:

<div class = 'content'>
    <div class = 'block1'></div>
    <div class = 'block2'></div>
    <div class = 'block3'></div>
</div>

block1 фиксированной ширины block2 фиксированной высоты

block2 и block3 слева от block1

Если задать block1 другую ширину, остальные блоки должны на это среагировать соответственно.

Подскажите как лучше такой вариант реализовать?

делать таблицу или использовать display: table не лучший вариант
использовать position хорошо если никакие блоки меняться не будут
использовать flex где изначально задать взаимное отношение блоков

Второй вариант реализовал, но в динамике очень неудобно использовать - надо отслеживать все блоки

Думаю, лучше через flex, но никак не могу понять как это реализовать. При условии что block1.width + block2.width < 100%, т.е. если block2 будет очень узким не должно случиться так, чтобы block3 стал сбоку (справа) от block2

Подскажите как можно реализовать такую схему через flex?

Answer 1

Первый вариант — Grid:

.block1 { 
  background-color: red; 
  grid-area: block1; 
  min-height: 70px; 
} 
 
.block2 { 
  background-color: green; 
  min-height: 70px; 
  grid-area: block2; 
} 
 
.block3 { 
  background-color: yellow; 
  min-height: 300px; 
  grid-area: block3; 
} 
 
.content { 
  display: grid; 
  grid-template-columns: 200px auto; 
  grid-template-areas: "block1 block2" "block1 block3"; 
} 
 
@media (max-width: 400px){ 
  .content { 
    display: block; 
  } 
  .block1, 
  .block2, 
  .block3 { 
    width: 100%; 
  } 
}

<div class='content'> 
  <div class='block1'></div> 
  <div class='block2'></div> 
  <div class='block3'></div> 
</div>

Второй вариант — Flexbox:

.wrp { 
  display: flex; 
} 
 
.sidebar { 
  width: 200px; 
  flex-shrink: 0; 
} 
 
.block1 { 
  background-color: red; 
} 
 
.block2 { 
  background-color: green; 
  min-height: 70px; 
} 
 
.block3 { 
  background-color: yellow; 
  min-height: 300px; 
  flex-grow: 1; 
} 
 
.content { 
  display: flex; 
  flex-direction: column; 
  flex-shrink: 0; 
  flex-grow: 1; 
}

<div class='wrp'> 
  <div class='block1 sidebar'></div> 
  <div class="content"> 
    <div class='block2'></div> 
    <div class='block3'></div> 
  </div> 
</div>

Answer 2

html, body, .content { 
  height: 100%; 
  margin: 0; 
} 
 
.content { 
  display: grid; 
  grid-template: auto 1fr / auto 1fr; 
} 
 
.left { 
  background: orange; 
  width: 100px; 
  grid-row: 1 / span 2; 
} 
 
.top { 
  background: blue; 
  height: 50px; 
} 
 
.other { 
  background: green; 
}

<div class="content"> 
  <div class="left"></div> 
  <div class="top"></div> 
  <div class="other"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

поиск xpath по двум условиям

Всем приветНе получается найти значение элементов

188

HTML

Переадресация через java

Мне нужно, чтобы сервер на java при попадании на него запроса от браузера переадресовывал на сайтНа 80 порту работает сервер, когда кто-то вводит...

178

HTML

Скругление границ между блоками

Помогите реализовать скругление как на картинке:

194

HTML

после нажатия на картинку открыть её описание. html,css,js

Допустим есть много много картинок (около 5000штук) и после нажатия одной из них открыватся модальное окно с описанием этой картинки

160