Отзывчивый CSS с двумя столбцами, второй один два ряда - PullRequest
Новая
       5

Отзывчивый CSS с двумя столбцами, второй один два ряда

0 голосов
/ 16 апреля 2020

Я хотел бы создать адаптивный макет таблицы с DIV, который имеет два столбца, а второй столбец разделен на две равные строки, поэтому он выглядит следующим образом.

text

Спасибо вы.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Вы можете использовать CSS Flex с flex: 1 и flex: 2

.container {
  display: flex;
  width: 100%;
  height: 300px;
  flex-wrap: wrap;
}
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.button {
  flex: 1;
  color: white;
}

.button.rowspan {
  flex: 2;
}
<div class="container">
  <div class="column">
    <div class="button rowspan" style="background: red;">
      Column 1 - rowspan
    </div> 
  </div>
  <div class="column">
    <div class="button" style="background: green">
      Column 2
    </div>
  
    <div class="button" style="background: orange">
      Column 3
    </div>
  </div>
</div>
0 голосов
/ 16 апреля 2020

Было бы приятно увидеть вашу попытку сделать это самостоятельно. Вы можете использовать сетку CSS для создания адаптивных макетов: 

<html>
  <div class="grid">
    <div class="left">

    </div>
    <div class="right-up">
    </div>
    <div class= "right-down">

    </div>
  </div>
</html>

CSS: 

.grid {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  grid-template-columns: 50vw 50vw;
  grid-template-rows: 50vh 50vh;
  grid-template-areas:
  "left right-up"
  "left right-down";

}

.left {
  grid-area: left;
  background-color: blue;
}
.right-up {
  grid-area: right-up;
  background-color: green;
}
.right-down{
  grid-area: right-down;
  background-color: red;
}

JSfiddle: JSfiddle link

...