Могу ли я разбрасывать div вокруг страницы случайным образом, используя только HTML и CSS?

Question

Я хочу, чтобы в центре страницы был прямоугольник, а вокруг него было разбросано несколько прямоугольников с разными размерами, случайными позициями и без перекрытия.

Я думаю, что это невозможно сделать только с помощью html и css, и необходим DOM javascript / html.

Вы видели примеры этого? У вас есть какой-нибудь совет или кусок кода, который может быть полезен? Не возражайте, если это не решит проблему в целом, решение для одной из подзадач (например, без наложения) также будет полезно!

Спасибо альтернативный текст http://img99.imageshack.us/img99/3563/scattered.jpg

Answer 1

Если размер фиксирован, идеальное центрирование div не сложно. Хитрость заключается в применении отрицательных полей:

#centered {
  width: 400px; height: 200px;
  position: absolute; top: 50%; left: 50%;
  margin-left: -200px; margin-top: -100px;
}

Теперь, чтобы расположить другие div относительно этого центрированного div, вы используете position: relative.

Пример фрагмента HTML-кода:

<div id="centered">
  <div id="other"></div>
</div>

И в дополнение к вышесказанному, следующий CSS:

#other {
  width: 200px; height: 100px;
  position: relative; top: -150px; left: 180px;
}

Добавьте рамку или цвет фона, чтобы лучше рассмотреть пример:

div {
  border: 1px solid black;
}

Если это не статическая страница и вы хотите рандомизировать при каждой загрузке страницы, вы можете использовать Javascript или некоторые сценарии на стороне сервера для динамического создания и стилизации div.

Answer 2

Я предполагаю, что вы хотите рандомизировать при каждой загрузке страницы, чтобы разные пользователи видели разные вещи. Если это так, это невозможно только с помощью HTML и CSS. CSS разработан так, чтобы быть детерминированным и воспроизводимым в согласованном порядке, что противоположно тому, что вы здесь делаете.

Однако, разумным способом было бы связать в таблице стилей динамическую страницу, которая сама обслуживает случайный CSS. Например, есть что-то вроде следующего:

<link rel="stylesheet" type="text/css" href="styles.php"/>

где styles.php - это страница PHP, которая генерирует случайный CSS.

Answer 3

Я не могу сделать только с HTML и CSS, ваши варианты:

• каждый раз создавайте таблицу стилей на языке сервера, таком как PHP, и передавайте контент, предварительно рассчитанный для браузера
• используйте базовую фиксированную таблицу стилей и изменяйте DOM через Javascript

что касается не перекрывающейся части, вам нужно немного по математике / геометрии: сгенерировать координаты для вершин, убедившись, что они не попадают в ранее созданный блок (скучно, но довольно просто), и использовать position: absolute для размещения их.

Answer 4

Что касается вашего вопроса: нет, это невозможно сделать, просто используя HTML и CSS.