Question

我正在尝试使用HTML / CSS，我在定位方面遇到了一些困难。我要做的是总共有12个盒子（3行，每行4个盒子）。顶行将是不同深浅的红色，第二行将是不同深浅的绿色，而底行将是不同深浅的蓝色。这就是我提出的代码：

html / css：

.square {
  height: 250px;
  width: 250px;
  border: 1px solid #fff;
}
#red > .square {
  float: left;
  background: #f00;
}
#green > .square {
  float: left;
  background: #0f0;
}
#blue > .square {
  float: left;
  background: #00f;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Color Squares</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main>
    <div id="red">
      <div class="square sq1"></div>
      <div class="square sq2"></div>
      <div class="square sq3"></div>
      <div class="square sq4"></div>
    </div>
    <div id="green">
      <div class="square sq1"></div>
      <div class="square sq2"></div>
      <div class="square sq3"></div>
      <div class="square sq4"></div>
    </div>
    <div id="blue">
      <div class="square sq1"></div>
      <div class="square sq2"></div>
      <div class="square sq3"></div>
      <div class="square sq4"></div>
    </div>
  </main>
</body>

</html>

我将在以后改变颜色，现在我更专注于修复定位。我在同一条线上保持相同颜色的盒子时遇到了麻烦。我希望第一行是所有红色框，但是一些绿色框出现在顶行，一些蓝色框出现在第二行。基本上，我需要一种方法在每行的末尾添加一个中断，以确保每行由一种颜色组成。在那之后，我需要帮助垂直和水平地对齐整个事物。我知道垂直居中可能会让CSS烦恼，但我甚至无法使水平居中（使用margin: auto似乎不起作用）。非常感谢任何帮助。

Answer 1

如果您添加以下css，这是否可以解决您的问题？

.sq1 {
  clear: left;  
}

它告诉每一行中的第一个方格与先前的浮动流断开并开始一个新的行。

更新：

要使其居中，您可以执行以下操作：

main {
  position: absolute;
  top: 50%;
  margin-top: -378px; 
  left: 50%;
  margin-left: -504px; 
}

margin-top是（squareHeight + top-border-width + bottom-border-width）* 3 square / 2. margin-left是类似的。以下文章解释得非常好，我认为：http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

无法定位div盒

1 个答案: