39

HTML ファイル/サイトに画像があり、その画像に使用できる色のリストを追加したいと考えています。非常に小さなボックスまたはドット、すべての色の小さなボックスを作成したいと考えています。

これどうやってするの？

ありがとう！

4

2 に答える 2

108

古いブラウザでは、を使用することがよくありますが、クリアフィックスfloatが必要になるため、このアプローチは最近はあまり使用されていません。

.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>

最近のブラウザでは、最も簡単な方法はフレックスボックスを使用することです。

.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>

于 2012-06-27T12:48:19.770 に答える
5

小さなドットを作成したい場合は、font awesome のアイコンを使用してください。

fa fa-circle
于 2018-02-13T07:12:27.937 に答える