javascript - 如何以非网格形式显示圆圈-6ren

javascript - 如何以非网格形式显示圆圈

转载作者：行者123 更新时间：2023-11-29 18:39:42

我正在尝试使用 CSS 实现下图中的布局。正如您所注意到的，它不是网格格式。我尝试了 shape-outside: circle(); 但它没有像我预期的那样工作。我怎样才能做到这一点？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Circles</title>

  <style>
  img {
    border-radius: 50%;
    shape-outside: circle();
    transition: transform .3s ease;
    padding: 5px;
  }
  img:hover {
    transform: scale(1.1);
  }
  </style>
</head>
<body>
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/100" />
</body>
</html>

最佳答案

您仍然可以使用网格，但只需使用 align-self 和 justify-self 属性，以及 start、 center 和 end 值以按照您的需要将它们错开:

img {
  border-radius: 50%;
  shape-outside: circle();
  transition: transform .3s ease;
  padding: 5px;
}

img:hover {
  transform: scale(1.1);
}

html, body{
   height: 100%;
   margin: 0;
}

body{
      background: rgba(0,0,0,0.3)
}

.grid{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   height: 100vh;
   min-height: 500px;
}

.grid > img:nth-child(1){
  align-self: end;
  justify-self: center;
}

.grid > img:nth-child(3){
  align-self: end;
}

.grid > img:nth-child(4){
  justify-self: end;
}

.grid > img:nth-child(5){
  justify-self: center;
  align-self: center;
}

.grid > img:nth-child(7){
  justify-self: end;
}

.grid > img:nth-child(8){
  align-self: center;
  justify-self: center;
}

.grid > img:nth-child(9){
  justify-self: center;
  align-self: center;
}

<div class="grid">
  <img src="https://picsum.photos/50" />
  <img src="https://picsum.photos/70" />
  <img src="https://picsum.photos/60" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/75" />
  <img src="https://picsum.photos/90" />
  <img src="https://picsum.photos/40" />
  <img src="https://picsum.photos/85" />
  <img src="https://picsum.photos/45" />
</div>

关于javascript - 如何以非网格形式显示圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58084709/