如何在固定宽度和高度的div中对齐四个圆圈

Question

I want to place four circles inside a div which of fixed width and height. The size (width) of the circles will be in percentage and the values will be dynamic. Based on the values, the circles should align accordingly to fill the fixed width and height of the div. The circles should not overlap each other.

<div class="main-container">
 <div class="circles-wrapper">
  <div class="one circle-box">
    <div class="circle"><div>55%</div></div>
  </div>
  <div class="two circle-box">
    <div class="circle"><div>15%</div></div>
  </div>
  <div class="three circle-box">
    <div class="circle"><div>20%</div></div>
  </div>
  <div class="four circle-box">
    <div class="circle"><div>10%</div></div>
  </div>
 </div>
</div>

With css, somehow i am able to align the divs but sometimes i can see lot of empty spaces left in the div. how to achieve the same using javascript/jQuery.

jsfiddle

I want the output similar to this

Answer 1

Since your question said "provide me with a solution"... I went a total different approach! I made an example that's not a complete ready-to-use solution, but hopefully a good inspiration towards it.

<div>
  <svg viewBox="0 0 600 600">
    <circle id="bal1"/>
    <circle id="bal2" cx="300" cy="120" r="50" fill="magenta"/>
    <circle id="bal3" cx="100" cy="500" r="60" fill="cyan" stroke="rgba(0,0,0,0.5)" stroke-width="3"/>
    <circle id="bal4" cx="350" cy="450" r="30" fill="red"/>
    <text id="txt1"                 dominant-baseline="middle" text-anchor="middle"><tspan id="tsp1"/></text>
    <text id="txt2" x="300" y="120" dominant-baseline="middle" text-anchor="middle"><tspan>50%</tspan></text>
    <text id="txt3" x="100" y="500" dominant-baseline="middle" text-anchor="middle"><tspan>60%</tspan></text>
    <text id="txt4" x="350" y="450" dominant-baseline="middle" text-anchor="middle" dy="5"><tspan>30%</tspan></text>
  </svg> 
</div>

and

html, body, div, svg {    height:     100vh;
                          width:      100vw }

html, body {  font-size:  0.05em } /* needed for using rem */
#txt1 {       font-size:  70rem }
#txt2 {       font-size:  50rem }
#txt3 {       font-size:  60rem }
#txt4 {       font-size:  30rem } /* mind the corresponding to the radius */

#bal4 {       fill:       red }
#bal1 {       fill:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><radialGradient id='grad'><stop offset='0%' stop-color='%23ff00cc'/><stop offset='100%' stop-color='%23333399'/></radialGradient></svg>#grad") purple }

and

/* first radius */
var br1 = 70;

/* here you will have to insert math to avoid overlapping */
var bal1 = document.getElementById('bal1');
var txt1 = document.getElementById('txt1');
bal1.setAttribute("cx", "100");
bal1.setAttribute("cy", "90");
bal1.setAttribute("r", br1);
txt1.setAttribute("x", "100");
txt1.setAttribute("y", "90");

document.getElementById("tsp1").innerHTML = br1 + "%";

So ball #1's position / text #1's value are dynamic.

Please better see it in action at https://codepen.io/anon/pen/pqzpKP

Now I asume you will use it with text clipping around. In that case make the svg external (using for example PHP), and use CSS like

  div#bla { shape-outside:          url('/img/balls.php?r1=70&r2=etc'); /* url-encode? */
            shape-margin:           8px;
            shape-image-threshold:  0.5;

Answer 2

I don't know if you'll like my answer. If you want them all over the place I would need more information like:would the first circle be always the bigger? How do you exactly intend to order them? Maybe the first in the left upper corner and the other 3 divs around this ones to the right? or perhaps like moons around a planet?

 let ry = [55,15,20,10]; let total = ry.reduce(getSum); let boxes = document.querySelectorAll(".circle-box") boxes.forEach((b,i)=>{ //let value = ry[i]+"%"; // if the sum of ry is not 100 let value = (ry[i] * total / 100)+"%"; let textdiv = b.querySelector(".circle div"); textdiv.textContent = value; b.style.width = value; b.style.height = value; b.style.fontSize = value; }) function getSum(total, num) { return total + num; } 

 * { box-sizing: border-box; margin: 0; padding: 0; } .circles-wrapper { width: 500px; height: 500px; text-align: center; border: 1px solid #d9d9d9; } .circle-box { display: inline-block; padding: 0.5rem; border: 1px solid #f5f5f5; } .circle { background: #333; color: white; width: 100%; height: 100%; position: relative; border-radius: 50%; } .circle div { width: 100%; height: 1em; position: absolute; margin: auto; top: 0; bottom: 0; font-size: 5em; } .one .circle { background: #4056a1; } .two .circle { background: #f5970d; } .three .circle { background: #ac3b61; } .four .circle { background: #f76c6c; } /* .one{width:55%;height:55%;font-size:55%} .two{width:15%;height:15%;font-size:15%} .three{width:20%;height:20%;font-size:20%} .four{width:10%;height:10%;font-size:10%} */ 

 <div class="main-container"> <div class="circles-wrapper"><!-- --><div class="one circle-box"> <div class="circle"><div></div></div> </div><!-- --><div class="two circle-box"> <div class="circle"><div></div></div> </div><!-- --><div class="three circle-box"> <div class="circle"><div></div></div> </div><!-- --><div class="four circle-box"> <div class="circle"><div></div></div> </div> </div> </div> 

Answer 3

You should have a look to flex-box CSS

For your case I recommand the following style for the container div

display: flex
flex-direction: row
justify-content: space-around

You should have a look to this tutorial