html - float div，使它们并排排列

Question

我有 40 个 div，我想创建一个包含 8 列和 5 行的网格。这是最基本的事情，但看在上帝的份上，我无法让它们正确对齐。

这是我想要实现的:

这是我的 jsFiddle:
https://jsfiddle.net/GY22/ou7t1osd/

还有代码:

.colorPickerWrapper {
  width: 450px;
  height: 285
}
.color-tile {
  cursor: pointer;
  width: 55px;
  height: 55px;
}
.color-1 {
  background-color: #ff43ad;
}
.color-2 {
  background-color: #f8e928;
}
.color-3 {
  background-color: #99fa42;
}
.color-4 {
  background-color: #5eacfc;
}
.color-5 {
  background-color: #cdcdcd;
}
.color-6 {
  background-color: #9e72bd;
}
.color-7 {
  background-color: #bb85e1;
}
.color-8 {
  background-color: #c8a0e4;
}
.color-9 {
  background-color: #e1c3f6;
}
.color-10 {
  background-color: #efdbfd;
}
.color-11 {
  background-color: #7d8ec6;
}
.color-12 {
  background-color: #94a6e3;
}
.color-13 {
  background-color: #aabaed;
}
.color-14 {
  background-color: #c1cdf6;
}
.color-15 {
  background-color: #dce4fc;
}
.color-16 {
  background-color: #66bcb5;
}
.color-17 {
  background-color: #88d8d2;
}
.color-18 {
  background-color: #a4e3de;
}
.color-19 {
  background-color: #b9f1ec;
}
.color-20 {
  background-color: #d6f9f7;
}
.color-21 {
  background-color: #59b660;
}
.color-22 {
  background-color: #7cd680;
  width: 55px;
  height: 55px;
}
.color-23 {
  background-color: #9aeea0;
}
.color-24 {
  background-color: #b8f0bd;
}
.color-25 {
  background-color: #cdfcd0;
}
.color-26 {
  background-color: #c4b714;
}
.color-27 {
  background-color: #ded237;
}
.color-28 {
  background-color: #ece162;
}
.color-29 {
  background-color: #fcf27b;
}
.color-30 {
  background-color: #fdf6a6;
}
.color-31 {
  background-color: #d87944;
}
.color-32 {
  background-color: #f1925b;
}
.color-33 {
  background-color: #f9a97b;
}
.color-34 {
  background-color: #f5c0a1;
}
.color-35 {
  background-color: #fddbc0;
}
.color-36 {
  background-color: #df5755;
}
.color-37 {
  background-color: #fa777e;
}
.color-38 {
  background-color: #f7989d;
}
.color-39 {
  background-color: #f8b0af;
}
.color-40 {
  background-color: #f9c9c8;
}

<div class="colorPickerWrapper">
  <div class="color-1 color-tile"></div>
  <div class="color-2 color-tile"></div>
  <div class="color-3 color-tile"></div>
  <div class="color-4 color-tile"></div>
  <div class="color-5 color-tile"></div>
  <div class="color-6 color-tile"></div>
  <div class="color-7 color-tile"></div>
  <div class="color-8 color-tile"></div>
  <div class="color-9 color-tile"></div>
  <div class="color-10 color-tile"></div>
  <div class="color-11 color-tile"></div>
  <div class="color-12 color-tile"></div>
  <div class="color-13 color-tile"></div>
  <div class="color-14 color-tile"></div>
  <div class="color-15 color-tile"></div>
  <div class="color-16 color-tile"></div>
  <div class="color-17 color-tile"></div>
  <div class="color-18 color-tile"></div>
  <div class="color-19 color-tile"></div>
  <div class="color-20 color-tile"></div>
  <div class="color-21 color-tile"></div>
  <div class="color-22 color-tile"></div>
  <div class="color-23 color-tile"></div>
  <div class="color-24 color-tile"></div>
  <div class="color-25 color-tile"></div>
  <div class="color-26 color-tile"></div>
  <div class="color-27 color-tile"></div>
  <div class="color-28 color-tile"></div>
  <div class="color-29 color-tile"></div>
  <div class="color-30 color-tile"></div>
  <div class="color-31 color-tile"></div>
  <div class="color-32 color-tile"></div>
  <div class="color-33 color-tile"></div>
  <div class="color-34 color-tile"></div>
  <div class="color-35 color-tile"></div>
  <div class="color-36 color-tile"></div>
  <div class="color-37 color-tile"></div>
  <div class="color-38 color-tile"></div>
  <div class="color-39 color-tile"></div>
  <div class="color-40 color-tile"></div>
</div>

Answer 1

flex-box 总是一个解决方案:)

https://jsfiddle.net/1yrm5u29/

.colorPickerWrapper{
    width: 450px;
    height: 285;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
}