Как сделать контент внутри круга 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

Я просто работал немного на этом, но я думаю, что вы можете получить представление вы просто должны добавить свои фигуры я дал вам начать в вправо, но

Codepenhttp://codepen.io/noobskie/pen/NGqPEJ?editors=110 Возможно, есть и другие более эффективные способы завершить это, но это только для того, чтобы дать вам представление.

Ive завернул все ваши цвета в пролеты только для лучшего orginazation.

Чтобы добавить новый круг, все, что вам нужно сделать, это копировать, то есть: <a href='#' class='deg10'></a> вставить его в один и тот же диапазон, переименовать класс в <a href='#' class='deg20'></a>, а затем просто изменить scss соответственно.

Все его использование в основном - это свойство css transform и перемещение его по странице.

Хорошая статья для проверки и помочь вам вместе с этим можно было бы найти здесь Position icons into circle