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

【问题标题】：how to align four circles inside a div which of fixed width and height如何在固定宽度和高度的div内对齐四个圆圈
【发布时间】：2019-05-09 13:36:08
【问题描述】：

我想在一个固定宽度和高度的 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

我想要类似这样的输出

【问题讨论】：

您能否提供一个您想要达到的最终结果的示例？
@GetOffMyLawn 我现在添加了一个输出示例。

标签： javascript jquery css html5-canvas geometry

【解决方案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;

【讨论】：

【解决方案2】：

我不知道你是否会喜欢我的回答。如果您希望它们遍布整个地方，我需要更多信息，例如：第一个圆圈总是更大吗？您究竟打算如何订购它们？也许左上角的第一个和右边的其他 3 个 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>

【讨论】：

【解决方案3】：

你应该看看 flex-box CSS

对于您的情况，我建议容器使用以下样式div

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

你应该看看这个tutorial

【讨论】：