Comment positionner des cercles dans un cercle avec css/bootstrap ?

Question

Je me demandais comment je pouvais positionner des cercles ou des images dans un cercle. J'ai essayé de les positionner en les mettant dans un conteneur et en les faisant tourner autour d'un cercle, mais je n'arrive pas à trouver comment faire comme l'image ci-dessous :

.deg1 {
  transform: rotate(270deg) translate(6em) rotate(-270deg);
  top: 50px;
  position: relative;
}

/* 1 */

.deg2 {
  transform: translate(6em);
}

/* 2 */

.deg3 {
  transform: rotate(45deg) translate(6em) rotate(-45deg);
}

/* 3 */

.deg4 {
  transform: rotate(135deg) translate(6em) rotate(-135deg);
}

/* 4 */

.deg5 {
  transform: translate(-6em);
}

/* 5 */

.deg6 {
  transform: rotate(225deg) translate(6em) rotate(-225deg);
}

/* 6 */

.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

J'ai d'abord essayé de chercher dans la documentation de bootstrap quelque chose qui puisse m'aider. Je viens donc de faire cela et je n'arrive pas à trouver la solution.

Answer 1

J'utiliserais Javascript/jquery pour définir la position de chaque cercle extérieur.

Jquery, volé sans vergogne à ThiefMaster♦ et leur réponse à ce QUESTIONS ET RÉPONSES

var radius = 50; // adjust to move out items in and out 
var fields = $('.container div'),
  container = $('.container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

body {
  display: flex;
  height: 100vh;
  overflow:hidden;
}

.container {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid grey;
  background: #f00;
  animation: spin 3s infinite linear
}

.container div {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
}

.container div:first-child {
  background: blue;
}

@keyframes spin {
  100% {
    transform: rotate(1turn)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

Sans translate y transform vous pouvez même vous positionner en utilisant simplement top , left , "en bas" et "à droite".

Veillez à utiliser px car il se brisera si vous utilisez % valores.

Vous devez faire quelques modifications en fonction de votre image.

// .deg1 {
//   transform: rotate(270deg) translate(6em) rotate(-270deg);
// } /* 1 */
// .deg2 {
//   transform: translate(6em);
// } /* 2 */
// .deg3 {
//   transform: rotate(45deg) translate(6em) rotate(-45deg);
// } /* 3 */
// .deg4 {
//   transform: rotate(135deg) translate(6em) rotate(-135deg);
// } /* 4 */
// .deg5 {
//   transform: translate(-6em);
// } /* 5 */
// .deg6 {
//   transform: rotate(225deg) translate(6em) rotate(-225deg);
// } /* 6 */
.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

.center img {}

.deg1 img {
  position: relative;
  top: 100px;
}

.deg2 img {
  position: relative;
  bottom: 100px;
}

.deg3 img {
  position: relative;
  top: 50px;
  left: 85px;
}

.deg4 img {
  position: relative;
  top: 50px;
  right: 85px;
}

.deg5 img {
  position: relative;
  bottom: 50px;
  right: 85px;
}

.deg6 img {
  position: relative;
  bottom: 50px;
  left: 85px;
}

<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

Answer 3

Vous pouvez simplement utiliser les CSS pour positionner les éléments. Par exemple, voici un exemple d'utilisation de la grille CSS.

J'ai déclaré la grille en 6 lignes et 6 colonnes, afin de positionner les éléments en laissant les coins vides.

.circle-container {
  width: 24em; height: 24em;
  border-radius: 50%;
  border:2px solid red;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.circle-container a {
    display: block;
    border:2px solid grey;
    background:white;
    border-radius:50%;
    text-align:center;
}

.deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */
.deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */
.deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */
.deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */
.deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */
.deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */
.deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */

/*bring the lateral circles closer to the center*/
.deg2, .deg5{margin:0 -1em 0 1em;}
.deg3, .deg6{margin: 0 1em 0 -1em}

body{
  background:steelblue;
}

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

Si vous ne voulez pas utiliser la grille CSS (peut-être à cause d'IE11), vous pouvez aussi utiliser la technique de grille que vous préférez, peut-être des flotteurs, des blocs en ligne, peut-être même la flexbox, en positionnant les éléments sur trois lignes et en poussant vers le bas ceux qui sont sur le côté.

ici avec display:inline-block, ce qui devrait normalement retourner

123
456
7

et quelques transformations pour compenser que

.circle-container {
  width: 240px; height: 240px;
  border:2px solid red;
  font-size:0;/*typical inline-block whitespace hack*/
  border-radius:50%;
}
.circle-container a {
    display:inline-block;
    width:calc(100% / 3);
    height:calc(100% / 3);
    border:2px solid grey;
    background:white;
    text-align:center;
    font-size:1rem;
    border-radius:50%;
}
.deg1, .deg3, .deg4, .deg6{
  transform:translateY(50%);
}

.deg7{
  transform:translateX(100%)
}

body{
  background:steelblue;
}
*{box-sizing:border-box; margin:0; padding:0;}

<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>

Answer 4

Vous pouvez essayer d'ajuster certaines marges et la largeur du conteneur, puis il n'est pas nécessaire de compliquer avec la transformation :

.circle-container {
  position: relative;
  width: 12em;
  height: 12em;
  border:1px solid;
  border-radius: 50%;
  margin: 0.75em auto 0;
  transform:rotate(90deg);
}

.circle-container a {
  display: inline-block;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: blue;
  margin:-0.3em -0.1em;
}
a:first-child,
a:nth-child(6) {
  margin-left:2em;
}
a:nth-child(1),a:nth-child(2) {
  margin-top:0.3em;
}

<div class='circle-container'>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</div>