как выровнять четыре круга внутри div с фиксированной шириной и высотой

Question

Я хочу разместить четыре кружка внутри div с фиксированной шириной и высотой.Размер (ширина) кругов будет в процентах, а значения будут динамическими.Исходя из значений, круги должны выровняться соответственно, чтобы заполнить фиксированную ширину и высоту элемента div.Круги не должны перекрывать друг друга.

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

С помощью css я каким-то образом могу выровнять div, но иногда я вижу много пустых мест, оставшихся в div.как добиться того же, используя javascript / jQuery.

jsfiddle

Я хочу вывод, подобный этому

Answer 1

Поскольку в вашем вопросе говорилось «предоставьте мне решение» ... я пошел совершенно другим подходом!Я привел пример, который не является готовым к использованию решением, но, надеюсь, послужит хорошим вдохновением для него.

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

и

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 }

и

/* 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 + "%";

Таким образом, позиция шара # 1 / значение текста # 1 являются динамическими.

Пожалуйста, лучше посмотрите это в действии на https://codepen.io/anon/pen/pqzpKP

Теперь я предполагаю, что вы будете использовать его с ограничением текста вокруг.В этом случае сделайте svg внешним (используя, например, PHP) и используйте CSS вроде

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

Answer 2

Не знаю, понравится ли вам мой ответ.Если вы хотите, чтобы они были повсюду, мне понадобилась бы дополнительная информация: будет ли первый круг всегда больше?Как именно вы собираетесь их заказать?Может быть, первый в левом верхнем углу и остальные 3 деления вокруг этого справа?или, может быть, как спутники вокруг планеты?

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

Вы должны взглянуть на flex-box CSS

. Для вашего случая я рекомендую следующий стиль для контейнера div

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

Вы должны взглянуть на это учебник