Как сделать колонки как на изображении используя html и ссs

Question

Как сделать колонки как на изображении используя html и ссs

Рейтинг: 0Ответов: 4Опубликовано: 11.08.2023

Цвета - red, green, blue, yellow; Размеры - 5050, 140150. пере тыкал все что можно. обязательно нужно пользоваться свойством display в css помогите пожалуйста решить как можно скорее вот код на html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Радуга</title>
</head>
<body>
    <div class="red"></div>    
    <div class="grn"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
</body>
</html>

вот код на css

.red {
    width: 50px;
    height: 50px;
    background-color: red;
    display: block;
}
.grn {
    width: 50px;
    height: 50px;
    background-color: green;
    display: line;
}
.blue {
    width: 50px;
    height: 50px;
    background-color: blue;
    display: line;
    
}
.yellow {
    
    width: 140px;
    height: 150px;
    background-color: yellow;
    display: inline-block
    
}

css html

Источник: Stack Overflow на русском

Answer 1

▲ 2

section {
  display: grid;
  grid-template-columns: 50px 140px;
  grid-auto-rows: 50px;
}

.right {
  grid-column: 2;
  grid-row: 1 / 4;
}

<section>
  <div style="background:red"></div>
  <div style="background:green"></div>
  <div style="background:blue"></div>
  <div style="background:yellow" class="right"></div>
<section>

Answer 2

▲ 1

Вот так

        .parent {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }

        .div1 {
            grid-area: 1 / 1 / 2 / 2;
            background-color: red;
        }

        .div2 {
            grid-area: 2 / 1 / 3 / 2;
            background-color: green;
        }

        .div3 {
            grid-area: 3 / 1 / 4 / 2;
            background-color: blue;
        }

        .div4 {
            grid-area: 1 / 2 / 4 / 3;
            background-color: yellow;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>

<body>
    <div class="parent">
        <div class="div1">Red</div>
        <div class="div2">Green</div>
        <div class="div3">Blue</div>
        <div class="div4">Yellow</div>
    </div>
</body>

</html>

Answer 3

▲ 1

Мы просто делаем в один блок три цвета и все работает

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Радуга</title>
</head>
<body>
    <div class="color">
        <div class="red"></div>
        <div class="grn"></div>
        <div class="blue"></div>
    </div>    
    <div class="yellow"></div>
</body>
</html>

css

.color {
        display: inline-block;
    }
    .red {
        width: 50px;
        height: 50px;
        background-color: red;
        
    }
    .grn {
        width: 50px;
        height: 50px;
        background-color: green;
        
    }
    .blue {
        width: 50px;
        height: 50px;
        background-color: blue;
        
    }
    .yellow {
        
        width: 140px;
        height: 150px;
        background-color: yellow;
        display: inline-block;
        margin-left: -4px;
}

Answer 4

▲ 0

Вот вариант с display: flex; Может быть не такое элегантное решение, как с display: grid; но, всё же

.container {
  display: flex;
  height: 150px;
  width: 190px;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
}

.container .red {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 0;
  padding: 0;
}

.container .green {
  width: 50px;
  height: 50px;
  background-color: green;
  margin: 0;
  padding: 0;
}

.container .blue {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 0;
  padding: 0;
}

.container .yellow {
  width: 140px;
  height: 150px;
  background-color: yellow;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>display</title>
</head>

<body>
  <div class="container">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
</body>

</html>

Как сделать колонки как на изображении используя html и ссs

Ответы