Можно ли перемещать и складывать элементы, используя только CSS?

Question

Я хотел посмотреть, возможно ли это без использования JavaScript и только CSS. У меня есть список элементов в div. Есть некоторые элементы, которые в два раза меньше других, и я хочу, чтобы они складывались. Без добавления другого элемента контейнера для двух битов, поскольку я не могу изменить структуру, это просто список элементов div. Кроме того, может быть несколько тезисов (то есть, их может быть 20 из них со случайными наборами высоты 1/2 и нормальной высоты). Конечный результат должен выглядеть следующим образом:

Структура HTML:

<div id="issues">
    <div class="item issue">issue data 1</div>        
    <div class="item issue">issue data 2</div>            
    <div class="item bit">bit data 1</div>
    <div class="item bit">bit data 2</div>
    <div class="item issue">issue data 3</div> 
    (... can have repeating bits or issues here ...)           
</div>

Я использую CSS, который не работает:

.item {
    border: 1px solid red;
    float: right;
    margin: 5px;
}
.issue {
    width: 100px;
    height: 200px;
}
.bit {
    width: 100px;
    height: 90px;
}

и я в настоящее время получаю:

Вот версия: http://jsfiddle.net/kSgtY/

Answer 1

Обычно я бы никогда не использовал этот метод, но так как вы:

• Невозможно изменить разметку
• Не могу использовать JavaScript
• Имеют Фиксированные высоты и ширины ...

Вы можете использовать абсолютное позиционирование. Используя + смежный селектор и :first-child, мы можем выбрать элементы по отдельности:

Демо здесь .

CSS, который я добавил:

.issues {
    position:relative;
}
.issue, .bit {
    position:absolute;  
}
.issue:first-child {
    left:330px;
}
.issue:first-child + .issue {
    left:220px;  
}
.bit {
    left:110px;
    top:110px;  
}
.issue:first-child + .issue + .bit {
    top:0;
}

Answer 2

Если вы передумали и хотите использовать javascript , я настоятельно рекомендую jQuery Masonry .

Answer 3

Полагаю, вы могли бы сдвинуть второй бит, используя отрицательные поля, но вы должны быть уверены, что его height и порядок источника всегда одинаковы.

jSFiddle link

Answer 4

Вы должны создать enother DIV (выпуск данных 5), в который вы поместите эти 2 деления ( битовые данные 1 и битовые данные 2 )