我在 html 文件/网站上有一张图片，我想添加该图片的可用颜色列表。我想创建非常小的盒子或点，一个适合每种颜色的小盒子。
我怎样才能做到这一点？
Thanks!
对于旧的浏览器，您经常会使用float https://developer.mozilla.org/en-US/docs/Web/CSS/float，但是你需要一个clearfix https://stackoverflow.com/questions/8554043/what-is-a-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 https://developer.mozilla.org/en-US/docs/Web/CSS/flex:
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
