我在 html 文件/站点上有一张图片,我想为该图片添加可用颜色列表。我想创建非常小的盒子或点,每种颜色的小盒子。
我怎样才能做到这一点?
谢谢!
对于旧的浏览器,您会经常使用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>
如果你想创建一个小点,只需使用来自 font awesome 的图标。
fa fa-circle