Add divs around another div

Question

Add divs around another div

Navigation

#1 by (6 votes)
#2 by (3 votes)

5

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:

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 jquery html css

asked by Jorius 07.04.2017 в 18:33

source

2 answers

3

This can really be done with CSS and, although you will get rid of conditional (if-elses), you will not be free to do so with positions (at least with this solution).

What I propose is that the main circle positions it with position: relative and includes the rest of the green circles within the same position, with position: absolute .

In this way, as an element positioned with position: absolute can be positioned with reference to the positioned parent element, we can position the green circles with respect to the blue circle. For this you will need to use the properties top , left , bottom and right .

What is the advantage of doing it this way?

That in any place where you position the blue circle the green circles will be positioned relative to it and you will not have to recalculate the coordinates in which 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>

answered by 07.04.2017 в 19:12

Form POST PHP. Notice: Undefined index: How to search in datatable and get only the cell searched?

score 6 · Accepted Answer

First we assign a position absoluta for all elements .container > {position: absolute; to then be able to manipulate and apply a basic transformation of rotación and traslación . in addition to applying some additional properties such as border-radius to give style of circle among others. Remember that the degrees applicable to the rotation can vary depending on the elements you have, (360/cantidadelementos) = TotalGradosaplicables in my example are 6 elements would be = 60 applicable grades,

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