Невозможно выровнять фигуры вертикально, горизонтально рядом с H1 - PullRequest
Новая
       2

Невозможно выровнять фигуры вертикально, горизонтально рядом с H1

0 голосов
/ 24 октября 2018

Я пытаюсь сложить три квадратные фигуры друг над другом, с горизонтальным рядом с ними h1, различные варианты селектора дисплея, кажется, не работает, и когда он настроен «правильно»h1 "съедает" квадратные формы.

Html 

 <div class="squares">
        <div id="square1"></div>
        <div id="square2"></div>
        <div id="square3"></div>
      </div>

      <h1> korius</h1>

Css 

    h1 {
  color: #2d3436;
  font-size: 72px;
  display: inline;
}

.squares {
  display: inline;
}

.squares > div {
  display: block;
  height: 10px;
  width: 10px;
}

#square1 {
  background-color: #e67e22;
}

#square2 {
  background-color: #2980b9;
}

#square3 {
  background-color: #27ae60;
}

Js-скрипка: Весь код

Изображение желаемого результата

1 Ответ

0 голосов
/ 24 октября 2018

Незначительные изменения могут вам помочь. Поэтому родительский контейнер квадратов должен отображаться inline-block, чтобы его можно было расположить рядом с текстом «korius».И все элементы div в squares должны отображаться в блоке так, чтобы они отображались вертикально. 

.squares {
  display: inline-block;
}

.squares > div {
  display: block;
  margin-top: 10px;
  height: 10px;
  width: 10px;
}

Проверьте фрагмент ниже: 

html, body {
  width: 100%;
  height: 100%;
  background: #ecf0f1;
  font-family: 'Work Sans', sans-serif;
  margin: 0;
}

h1 {
  color: #2d3436;
  font-size: 72px;
  display: inline;
}

.squares {
  display: inline-block;
}

.squares > div {
  display: block;
  margin-top: 10px;
  height: 10px;
  width: 10px;
}

#square1 {
  background-color: #e67e22;
}

#square2 {
  background-color: #2980b9;
}

#square3 {
  background-color: #27ae60;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>korius</title>
</head>

<body>



  <div class="squares">
    <div id="square1"></div>
    <div id="square2"></div>
    <div id="square3"></div>
  </div>

  <h1> korius</h1>


</body>

</html>

Вы также можете проверить это здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...