3

我有六个图像，我想使用 HTML 和 CSS 将它们排列成一个圆圈。圆圈不应该旋转或类似的东西 - 有人对如何做到这一点有任何想法吗？

4

4 回答 4

2

我没有适合您的纯 CSS 解决方案，但这可能会对您有所帮助。使用 jQuery 的解决方案。即使您有超过 6 张图像，这也会对您有所帮助。

这是一个现场演示。

于 2012-09-05T17:19:24.157 回答
1

您可以使用相对定位来实现这一点：

​&lt;div id='box1'>&nbsp;</div>
<div id='box2'>&nbsp;</div>
<div id='box3'>&nbsp;</div>
<div id='box4'>&nbsp;</div>
<div id='box5'>&nbsp;</div>
<div id='box6'>&nbsp;</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
div{
    position:absolute;
    width:20px;
    height:20px;
}
#box1
{
   border:1px solid red;
   right:50%;
}   
#box2
{
    border:1px solid purple;
    top:30%;
    right:10%;
}
#box3
{
    border:1px solid orange;
    top:30%;
    left:10%;
}
#box4
{
    border:1px solid red;
    top:60%;
    right:10%;
}
#box5
{
    border: 1px solid green;
    top:60%;
    left:10%
}
#box6
{
    border:1px solid red;
    top:90%;
    right:50%;
}​

Js 小提琴在这里：http: //jsfiddle.net/E4j2R/

于 2012-09-05T17:04:54.777 回答
1

这里是@blasteralfred Ψ 解决方案的 jQuery 免费分支

function arrangeImagesInCircle(props = {}) {
  const getWidthHeight = element => {
    const { width, height } = element.getBoundingClientRect();
    return [width, height];
  }
  const radius = props.radius || 200;
  const imageSelector = props.imageSelector || 'img';
  const container = props.container;
  const [containerWidth, containerHeight] = getWidthHeight(container);

  return imageSelector => {
    const fields = container.querySelectorAll(imageSelector);
    const step = (2 * Math.PI) / fields.length;
    var angle = 0
    fields.forEach(field => {
      const [fieldWidth, fieldHeight] = getWidthHeight(field);
      const x = Math.round(containerWidth / 2 + radius * Math.cos(angle) - fieldWidth / 2);
      const y = Math.round(containerHeight / 2 + radius * Math.sin(angle) - fieldHeight / 2);
      if (window.console) console.log(x, y);
      field.style.left = x + 'px';
      field.style.top = y + 'px';
      angle += step;
    });
  }
}
于 2019-10-30T12:35:56.080 回答
1

看看这个：https ://hugogiraudel.com/2013/04/02/items-on-circle/?fbclid=IwAR04rSahTdicEnKABuoojF6ZYBA2ovU6OQWJMCvt5I01sjCKz5QuHvMqG58

这是笔：https: //codepen.io/HugoGiraudel/pen/Bigqr Mixin 将项目放在一个圆圈上

  • 让孩子有绝对的定位
  • 允许在列表中使用 mixin
  • 如果 box-sizing:border-box 已启用

  • 允许定位任何类型的直接子代

    <ul class='circle-container'>
  <li><img src='http://lorempixel.com/100/100/city'></li>
  <li><img src='http://lorempixel.com/100/100/nature'></li>
  <li><img src='http://lorempixel.com/100/100/abstract'></li>
  <li><img src='http://lorempixel.com/100/100/abstract'></li>
  <li><img src='http://lorempixel.com/100/100/cats'></li>
  <li><img src='http://lorempixel.com/100/100/food'></li>
  <li><img src='http://lorempixel.com/100/100/animals'></li>
  <li><img src='http://lorempixel.com/100/100/business'></li>
  <li><img src='http://lorempixel.com/100/100/people'></li>
</ul>

/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
/// @param {String | false} $class-for-IE - Base class name for old IE

@mixin distribute-on-circle( 
  $nb-items,
  $circle-size,
  $item-size,
  $class-for-IE: false
) {
  $half-item: ($item-size / 2);
  $half-parent: ($circle-size / 2);

  position: relative; /* 1 */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none; /* 2 */ 
  box-sizing: content-box; /* 3 */ 

  > * { /* 4 */
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;
  }

  $angle: (360 / $nb-items);
  $rot: 0;

  @for $i from 1 through $nb-items {
    @if not $class-for-IE {
      > :nth-of-type(#{$i}) {
        transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
      }
    } @else {
      > .#{$class-for-IE}#{$i} {
        // If CSS transforms are not supported
        $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
        $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
        margin: $mt 0 0 $ml;
      }
    }

    $rot: ($rot + $angle);
  }
}

.circle-container {
  @include distribute-on-circle(8, 20em, 6em, false); 
  margin: 5em auto 0;
  border: solid 5px tomato;
}

.circle-container img { 
  display: block; 
  width: 100%; 
  border-radius: 50%;
  filter: grayscale(100%);

  &:hover {
    filter: grayscale(0);
  }
}

它允许您自定义项目的数量.. 还支持 IE :) 非常酷的解决方案

于 2019-01-05T12:23:03.443 回答