@RushV

Как позиционировать картинки по кругу внутри div (a)?

Здравствуйте!
Нашёл в сети вот этот код расположение объектов по кругу
<div id="wrap">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
</div>
СSS
<code>#wrap {position: absolute; }
#wrap img {width: 30px; height: 30px; background:#333; position: absolut
</code>
<code lang="javascript">
var num = 8; // Число картинок
var wrap = 400; // Размер "холста" для расположения картинок
var radius = 150; // Радиус нашего круга

$(document).ready(function() {
  for (i=0;i<num; i++){
    var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
    var left = wrap + radius * Math.sin(f) + 'px';
    var top = wrap + radius * Math.cos(f) + 'px';
    $('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждой картинке
  }
});
</code>

Всё работает, но у меня не получается разместить этот круг внутри дива по умолчанию круг находится внизу страницы. Я использую бустрап 3 подскажите как правильно расположить такой круг в блоке div ?
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
див имеет абсолютное позиционирование, а значит его детишки не влияют на его размеры. Установите его размеры сами, и увидите, что все внутри него.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы