如何将 div 中的项目分开（它们彼此堆叠）并居中，以便它们之间的空间相等

发布于 2025-01-17 04:31:01 字数 1165 浏览 4 评论 0原文

我制作了 4 个单独的圆圈来测试圆锥渐变，我想将它们居中，使它们等距，但它们都彼此堆叠在一起，所以它们只是在一个单位中移动。

我的 HTML：

 <div class="allcorners">
  <div class="corner1"> </div>
  <div class="corner2"> </div>
  <div class="corner3"> </div>
  <div class="corner4"> </div>
</div>

我的 CSS：

.c-gradients{
 margin-right:0;
 margin-left: 0;
 justify-content: center;
}
.c-gradient1{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4,#9de3c1, #7980bd);
  border-radius: 50%;
  position: absolute;
  padding: auto;
  }
 .c-gradient2{
   height: 200px;
   width: 200px;
   background-image: conic-gradient(#bcadc4 45deg,#9de3c1 90deg, #7980bd);
   border-radius: 50%;
   position: absolute;
   padding: auto;
   }

 .c-gradient3{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4 80deg,#9de3c1 90deg, #7980bd);
  border-radius: 50%;
  position: absolute; 
  }    

 .c-gradient4{
   height: 200px;
   width: 200px;
   background-image: repeating-conic-gradient(#bcadc4 10%,#9de3c1 25%);
   border-radius: 50%;
    position: absolute;
 }

原文

I made 4 separate circles to test out conic gradients, I want to center them so that they are equally spaced, but they are all stacked over each other so they kinda just move in one unit.

my HTML:

 <div class="allcorners">
  <div class="corner1"> </div>
  <div class="corner2"> </div>
  <div class="corner3"> </div>
  <div class="corner4"> </div>
</div>

My CSS:

.c-gradients{
 margin-right:0;
 margin-left: 0;
 justify-content: center;
}
.c-gradient1{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4,#9de3c1, #7980bd);
  border-radius: 50%;
  position: absolute;
  padding: auto;
  }
 .c-gradient2{
   height: 200px;
   width: 200px;
   background-image: conic-gradient(#bcadc4 45deg,#9de3c1 90deg, #7980bd);
   border-radius: 50%;
   position: absolute;
   padding: auto;
   }

 .c-gradient3{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4 80deg,#9de3c1 90deg, #7980bd);
  border-radius: 50%;
  position: absolute; 
  }    

 .c-gradient4{
   height: 200px;
   width: 200px;
   background-image: repeating-conic-gradient(#bcadc4 10%,#9de3c1 25%);
   border-radius: 50%;
    position: absolute;
 }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

行雁书 2025-01-24 04:31:01

只需将 div 定位为 left:xx%;另外，您的课程标签错误。做事有立场：绝对；通常应该避免，因为它将这些元素从 DOM 序列中取出。这是一个很好的例子，说明了在哪里可以使用 flex。

.allcorners{
 margin-right:0;
 margin-left: 0;
 justify-content: center;
}
.corner1{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4,#9de3c1, #7980bd);
  border-radius: 50%;
  position: absolute;
  padding: auto;
  left:0;
  }
 .corner2{
   height: 200px;
   width: 200px;
   background-image: conic-gradient(#bcadc4 45deg,#9de3c1 90deg, #7980bd);
   border-radius: 50%;
   position: absolute;
   padding: auto;
   left:25%;
   }

 .corner3{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4 80deg,#9de3c1 90deg, #7980bd);
  border-radius: 50%;
  position: absolute;
  left:50%;
  }    

 .corner4{
   height: 200px;
   width: 200px;
   background-image: repeating-conic-gradient(#bcadc4 10%,#9de3c1 25%);
   border-radius: 50%;
    position: absolute;
    left:75%;
 }

 <div class="allcorners">
  <div class="corner1"> </div>
  <div class="corner2"> </div>
  <div class="corner3"> </div>
  <div class="corner4"> </div>
</div>

just position the divs with left:xx%; also, your classes are mislabeled. Doing things with position:absolute; should generally be avoided as it takes those elements out of the DOM sequence. This is a good example of where to use flex instead.

.allcorners{
 margin-right:0;
 margin-left: 0;
 justify-content: center;
}
.corner1{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4,#9de3c1, #7980bd);
  border-radius: 50%;
  position: absolute;
  padding: auto;
  left:0;
  }
 .corner2{
   height: 200px;
   width: 200px;
   background-image: conic-gradient(#bcadc4 45deg,#9de3c1 90deg, #7980bd);
   border-radius: 50%;
   position: absolute;
   padding: auto;
   left:25%;
   }

 .corner3{
  height: 200px;
  width: 200px;
  background-image: conic-gradient(#bcadc4 80deg,#9de3c1 90deg, #7980bd);
  border-radius: 50%;
  position: absolute;
  left:50%;
  }    

 .corner4{
   height: 200px;
   width: 200px;
   background-image: repeating-conic-gradient(#bcadc4 10%,#9de3c1 25%);
   border-radius: 50%;
    position: absolute;
    left:75%;
 }

 <div class="allcorners">
  <div class="corner1"> </div>
  <div class="corner2"> </div>
  <div class="corner3"> </div>
  <div class="corner4"> </div>
</div>

回复收藏 0 原文

~没有更多了~