html - 使 float 的 CSS div 居中

Question

我正在做一个练习，我试图重新创建这个:https://ibb.co/Nx48VbD

* {
  box-sizing: border-box;
}

.row-1 {
  background-color: grey;
  border: 1px solid black;
  width: 1178px;
  height: 146px;
  margin: 96px auto 0 auto;
  position: relative;
  right: 12px;
}

.row-2 {
  float: left;
  margin: 0 auto;
}

.b1 {
  background-color: grey;
  border: 1px solid black;
  width: 346px;
  height: 248px;
  margin-top: 24px;
  float: left;
}

.b1:nth-of-type(1) {
  margin-right: 90px;
}

.b1:nth-of-type(2) {
  margin-right: 46px;
}

.b1:nth-of-type(3) {
  bottom: 12px;
  right: 12px;
}

.row-3 {
  background-color: grey;
  border: 1px solid black;
  width: 1188px;
  height: 326px;
  margin: 24px auto;
  border-radius: 36px;
}

.b2 {
  background-color: gray;
  border: 1px solid black;
  height: 202px;
  border-radius: 24px;
  float: left;
}

.b2:nth-of-type(1) {
  width: 726px;
  margin-right: 24px;
}

.b2:nth-of-type(2) {
  width: 438px;
}

.b3 {
  background-color: gray;
  border: 1px solid black;
  height: 202px;
  margin-top: 24px;
  float: left;
}

.b3:nth-of-type(1) {
  width: 436px;
  margin-right: 84px;
  border-radius: 24px;
}

.b3:nth-of-type(2) {
  width: 666px;
}

<div class="row-1"></div>
<div class="row-2">
  <div class="b1"></div>
  <div class="b1"></div>
  <div class="b1"></div>
</div>
<div style="clear: both;"></div>
<div class="row-3"></div>
<div class="row-4">
  <div class="b2"></div>
  <div class="b2"></div>
</div>
<div style="clear: both;"></div>

<div class="row-5">
  <div class="b3"></div>
  <div class="b3"></div>
</div>

通过使用 margin: 0 auto;，我能够让第一行和第三行居中。但是，当我在第 2、4 和 5 行尝试此操作时，它似乎不起作用。我如何才能像图片中显示的那样将它们居中？

另外，我有 background-color: gray;边框:1px 纯黑色；在很多地方。有什么办法可以做到这一点？

我也有很多 margin-top margin-bottoms 因为每个盒子都有 12px 的边框。有没有办法让我也做这个 DRY-er？

注意:这个练习应该在不使用 flexbox 或 css 网格的情况下完成。

谢谢!

Answer 1

使用 display: inline-block 而不是 .b1 上的 float

使用 calc 将它们设置为等宽，然后设置 text-align: center on the row-2 应该可以做到这一点

.row-2{
  text-align: center;
}

.b1{
  display: inline-block;
  vertical-align: top;
  width: calc(100%/3 - 10px);
  height: 100px;
  border: 2px solid grey;
}

<div class="row-2">
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
</div>

如果你想让你的颜色/边框变干，我建议你学习 SASS/SCSS 然后你可以使用变量和混合

https://sass-lang.com/guide