如何使圆内div正确匹配内容

Question

我需要实现一个类似下图（使用HTML，CSS）的结构，我不知道如何让内容（圆圈）适合更大的圆圈。

我很感激任何能够至少部分解决问题的解决方案。

我为此问题添加了一个带有一些基本HTML和CSS的简化页面。我需要的是div.structure内的内容适合（见第一张图片）。

这对我需要的东西来说是一个好的开始。

.structure {
  float: left;
  text-align: center;
  background-color: #ccc;
  border-radius: 50%;
  margin: 20%;
  width: 60%;
  display: table;
}
.item {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px 5px;
  background-color: deeppink;
  border-radius: 50%;
  display: table-cell;
  vertical-align: middle;
}
.item.s1 {
  background-color: deeppink;
}
.item.s2 {
  background-color: green;
}
.item.s3 {
  background-color: red;
}
.item.s4 {
  background-color: blue;
}
.item.s5 {
  background-color: aqua;
}
.structura_dep.dep6 {
  background-color: gray;
}

<div class="structure">
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
</div>

Answer 1

我刚刚对此有所了解，但我认为你可以得到你只需添加你的形状的想法，我给你一个正确方向的开始

Codepen http://codepen.io/noobskie/pen/NGqPEJ?editors=110 可能有其他更好的方法来完成这个，但这只是为了给你一个想法。

为了更好的组织，我已将所有颜色都包裹在跨度中。

要添加新圈子，您需要做的就是复制即：<a href='#' class='deg10'></a>将其粘贴到相同的范围内，将该类重命名为<a href='#' class='deg20'></a>，然后相应地更改scss。

它主要使用的是css transform属性并沿着页面移动它。

可以在Position icons into circle

找到一篇很好的文章来检查并帮助您