html - 如何使用 html 和 css 创建一个小彩盒？

Question

我在 html 文件/网站上有一张图片，我想为该图片添加可用颜色列表。我想创建非常小的方框或点，每种颜色都有一个小方框。

我该怎么做？

谢谢!

Answer 1

使用旧浏览器，您通常会使用 float , 但是你需要一个 clearfix所以现在这种方法不常使用。

.box {
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>

在现代浏览器中，最简单的方法是使用 flexbox :

.wrapper {
  display: flex;
}

.box {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

<div class="wrapper">
  <div class="box blue"></div>
  <div class="box purple"></div>
  <div class="box wine"></div>
</div>

或者使用display: inline-block:

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>