HTML と CSS を使用して円形に配置したい 6 つの画像があります。円は回転するべきではありません。
質問する
4755 次
4 に答える
2
私はあなたのための純粋なCSSソリューションを持っていませんが、これはあなたを助けるかもしれません。jQueryを使用したソリューション。これは、6つ以上の画像がある場合でも役立ちます。
これがライブデモです。
于 2012-09-05T17:19:24.157 に答える
1
これを実現するには、相対位置を使用できます。
<div id='box1'> </div>
<div id='box2'> </div>
<div id='box3'> </div>
<div id='box4'> </div>
<div id='box5'> </div>
<div id='box6'> </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
これをチェックしてください:https ://hugogiraudel.com/2013/04/02/items-on-circle/?fbclid=IwAR04rSahTdicEnKABuoojF6ZYBA2ovU6OQWJMCvt5I01sjCKz5QuHvMqG58
これがペンです: https://codepen.io/HugoGiraudel/pen/Bigqr 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 に答える
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 に答える