Как создать квадрат из 4 блоков с помощью HTML / CSS - PullRequest
Новая
       18

Как создать квадрат из 4 блоков с помощью HTML / CSS

0 голосов
/ 28 февраля 2019

Я пытаюсь понять, как построить квадрат из 4 коробок, как тот, что на экране печати.Я нашел этот макет на сайте Apple, и он мне очень понравился!

Я попробовал с начальной загрузкой и flexbox.Я думаю, что flexbox - лучшее решение, но я не нашел способа воспроизвести этот макет.

Кто-нибудь может помочь мне разобраться, как создать этот макет?

Layout's screencap

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019 

<!DOCTYPE html>
<html>
<head>
    <title>Box</title>
    <style>
        #div1{
            height:300px;
            width:300px;
            background-color:red;
            margin:0;
            }
        #div2{
            height:300px;
            width:300px;
            background-color:green;
            position:relative;
            left:320px;
            bottom:300px;
            }
         #div3{
            height:300px;
            width:300px;
            background-color:yellow;
            position:relative;
            bottom:280px;
            }
        #div4{
            height:300px;
            width:300px;
            background-color:blue;
            position:relative;
            left:320px;
            bottom:580px;
            }
            
    </style>
</head>

<body>

    <div id="div1">
    </div>

    <div id="div2">
    </div>

    <div id="div3">
    </div>

    <div id="div4"> 
    </div>

</body>

</html>
0 голосов
/ 28 февраля 2019

Если вы хотите использовать bootstrap, это легко выполнимо.

.noMargin {
  margin: 0px;
}

.one {
  background-color: red;
}

.two {
  background-color: yellow;
}

.three {
  background-color: green;
}

.four {
  background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row noMargin">
    <div class="col one">
      one
    </div>
    <div class="col two">
      two
    </div>
  </div>
  <div class="row noMargin">
    <div class="col three">
      three
    </div>
    <div class="col four">
      four
    </div>
  </div>
</div>

Если вы хотите сделать чистый HTML / CSS: 

.row {
  display: flex;
  width: 100%;
}

.row div {
  width: 50%;
}

.noMargin {
  margin: 0px;
}

.one {
  background-color: red;
}

.two {
  background-color: yellow;
}

.three {
  background-color: green;
}

.four {
  background-color: blue;
}
<div class="row noMargin">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
</div>
<div class="row noMargin">
  <div class="three">
    three
  </div>
  <div class="four">
    four
  </div>
</div>
...