Question

我正在尝试将三个正方形相互堆叠，水平放置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-fiddle: All the code

Image of wanted result

Answer 1

较小的更改可以为您提供帮助。因此，正方形的父容器应显示为inline-block，以便可以将其与文本“ korius”并排放置。并且squares下的所有div都必须显示为块，以便它们垂直显示。

.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>

您也可以here对其进行测试。

无法在H1旁边垂直，水平对齐形状

1 个答案: