如何在固定寬度和高度的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

我不知道你是否喜歡我的答案。 如果您希望到處都是它們，我將需要更多信息，例如：第一個圓圈會一直更大嗎？ 您到底打算如何訂購它們？ 也許第一個位於左上角，其他三個div位於右上角？ 還是像行星周圍的衛星？

 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

您應該看一下本教程