Home / Questions / 61380
Accepted
Jorius
Asked: 2020-04-08 08:33:24 +0800 CST 2020-04-08 08:33:24 +0800 CST

Add divs around another div

  • 772

I have the following:

* {
  font-family: Arial, Helvetica, sans-serif;
}

.x-y-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.g {
  font-size: 55px !important;
  width: 100px;
  height: 100px;
  border-radius: 50% !important;
  transition: all .2s ease-in-out;
  margin: 25px 0px 25px 0px;
}

.d {
  font-size: 25px !important;
  transition: all .2s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  margin: 25px 0px 5px 0px;
}

.g:hover,
.d:hover {
  transform: scale(1.1);
  box-shadow: 10px 10px 5px #888888;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?v=1">
<div class="container ">

  <div class="g x-y-center btn btn-primary">
    <b>G</b>
  </div>

  <div class="d x-y-center btn btn-success">
    <b>D</b>
  </div>

  <div class="d x-y-center btn btn-success">
    <b>D</b>
  </div>

  <div class="d x-y-center btn btn-success">
    <b>D</b>
  </div>

</div>

I would like to be able to achieve this:

enter image description here

I was trying with jquery, but I fall into an infinity of conditionals ( if-else if-else) validating coordinates and positions.

How can I do it in a simple and dynamic way?

javascript

2 Answers

  1. Best Answer

    We first assign a position absolutato all the elements .container > {position: absolute;so that we can then manipulate and apply a basic rotacióny transformation to them traslación. in addition to applying some additional properties such as border-radiusto give it a circle style among others. Remember that the degrees applicable to the rotation can vary depending on the elements you have, (360/cantidadelementos) = TotalGradosaplicablesin my example there are 6 elements = 60 applicable degrees,

    .container > * {
  position: absolute;
  top: 200px;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50% !important;
  padding-top: 20px !important;
  font-size: 16px !important;
}

.padre{
width:120px;
height: 120px;
left: 48%;
top: 180px;
padding:40px !important;
font-size:30px !important;
}
.container > :nth-of-type(1) {
  transform: rotate(0deg) translate(10em) rotate(0deg);
}
.container > :nth-of-type(2) {
  transform: rotate(60deg) translate(10em) rotate(-60deg);
}
.container > :nth-of-type(3) {
  transform: rotate(120deg) translate(10em) rotate(-120deg);
}
.container > :nth-of-type(4) {
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.container > :nth-of-type(5) {
  transform: rotate(240deg) translate(10em) rotate(-240deg);
}
.container > :nth-of-type(6) {
  transform: rotate(300deg) translate(10em) rotate(-300deg);
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?v=1">
<div class="container">
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="d btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
  <div class="btn btn-success">
    <b>D</b>
  </div>
 
  <div class="padre btn btn-primary">
    <b>G</b>
  </div>
</div>

    • 6

  2. You can actually do this with CSS and, although you'll get rid of if-elses, you won't get rid of doing it with positions (at least with this solution).

    What I propose is that you position the main circle with position: relativeand encompass the rest of the green circles within it, positioning them with position: absolute.

    In this way, since an element positioned with position: absolutecan be positioned by reference to the positioned parent element, we can position the green circles with respect to the blue circle. To do this you will need to make use of the top, left, bottomand properties right.

    What is the advantage of doing it this way?

    That wherever you position the blue circle the green circles will be positioned relative to it and you won't have to recalculate the coordinates where the blue circle is again.

    Example with three circles around the blue circle:

    * {
  font-family: Arial, Helvetica, sans-serif;
}

.x-y-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.g {
  font-size: 55px !important;
  width: 100px;
  height: 100px;
  border-radius: 50% !important;
  transition: all .2s ease-in-out;
  margin: 25px 0px 25px 0px;
}

.d {
  font-size: 25px !important;
  transition: all .2s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  margin: 25px 0px 5px 0px;
}

.g:hover,
.d:hover {
  transform: scale(1.1);
  box-shadow: 10px 10px 5px #888888;
}


/* Nuevas clases */

.container{
  max-width: 120px;
}

.principal{
  position: relative;
  top: 50px;
}

.absoluto{
  position: absolute;
}

.primero{
  top: -75px;
  left: 20px;
}

.segundo{
  top: -50px;
  left: -35px;
}

.tercero{
  top: 5px;
  left: -50px;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css?v=1">
<div class="container ">

  <div class="principal g x-y-center btn btn-primary">
    <b>G</b>
    <div class="primero absoluto d x-y-center btn btn-success">
      <b>D</b>
    </div>
    <div class="segundo absoluto d x-y-center btn btn-success">
      <b>D</b>
    </div>
    <div class="tercero absoluto d x-y-center btn btn-success">
      <b>D</b>
    </div>
  </div>
</div>

    • 3