Question

我想要使用HTML和CSS在一个圆圈中排列六张图像。圆圈不应该旋转或类似的东西 - 任何人对如何做到这一点都有任何想法？

Answer 1

查看以下内容：https://hugogiraudel.com/2013/04/02/items-on-circle/?fbclid=IwAR04rSahTdicEnKABuoojF6ZYBA2ovU6OQWJMCvt5I01sjCKz5QuHvMqG58

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

使孩子们处于绝对的位置
允许在列表中使用mixin
如果调整框大小：启用了边框框

允许将任何类型的直属子作为目标

<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 :) 很酷的解决方案

Answer 2

您可以使用相对定位来实现此目的：

<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/

Answer 3

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

Here 是一个现场演示。

Answer 4

Here的@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;
    });
  }
}

将图像排列成圆圈

4 个答案: