Question

您好我试图建立一个有四个季度的圈子，但我的div似乎因某种原因重叠。

如何制作圆圈的下半部分与顶部不重叠？

感谢任何帮助

＆＃13;

body {
  margin: 150px;
}

#topleft {
  height: 0px;
  width: 0px;
  border: 90px solid red;
  border-top-left-radius: 180px;
}

#topright {
  height: 0px;
  width: 0px;
  border: 90px solid blue;
  border-top-right-radius: 180px;
}
#bottomleft {
  height: 0px;
  width: 0px;
  border: 90px solid green;
  border-bottom-left-radius: 180px;
}

#bottomright {
  height: 0px;
  width: 0px;
  border: 90px solid yellow;
  border-bottom-right-radius: 180px;
}

＆＃13;

<div>
  <span id="topleft"></span>
  <span id="topright"></span>
</div>
<div>
  <span id="bottomleft"></span>
  <span id="bottomright"></span>
</div>

＆＃13;

Answer 1

可证明宽度和高度问题。如果你给出90px的宽度和高度，它可能会被解决。也使用背景颜色而不是边框颜色。

＆＃13;

#topleft {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: red;
  border-top-left-radius: 180px;
}

#topright {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: blue;
  border-top-right-radius: 180px;
}
#bottomleft {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: green;
  border-bottom-left-radius: 180px;
}

#bottomright {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: yellow;
  border-bottom-right-radius: 180px;
}

＆＃13;

<div>
  <span id="topleft"></span>
  <span id="topright"></span>
</div>
<div>
  <span id="bottomleft"></span>
  <span id="bottomright"></span>
</div>

＆＃13;

Answer 2

问题是你的div没有高度 - 它基本上为零，因此span元素最终重叠。由于div是块元素，因此宽度会自动调整以适合其内容，但不适合高度。解决方法是设置高度：

div { 
  height: 180px;
}

这是一个小提琴：https://jsfiddle.net/vn9163tp/

Answer 3

使用此代码

func scrollViewWillBeginDecelerating(scrollView: UIScrollView) {
scrollView.setContentOffset(scrollView.contentOffset, animated: true)
}

建立一个圆圈，为什么div重叠？

3 个答案: