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

您应该看看这个tutorial

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

3 个答案: