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

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

Final Result

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; 
}

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

Current Version

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

источник

2011-12-29 christophercotton

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

источник

2011-12-29 19:40:52 Ilkar

У меня нет такой возможности для создания второго div, поэтому я спрашивал о решении без него. Поскольку я заранее не знаю, как будут проходить дивины. Может быть 1 большой, 4 маленьких, 1 большой, 3 маленьких и т. Д. – christophercotton

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

jSFiddle link

источник

2011-12-29 19:42:06

Это выглядит многообещающим, знаете ли вы, как вы могли его обновить, чтобы он работал с любым количеством бит подряд, например, http://jsfiddle.net/kSgtY/4/? – christophercotton

В зависимости от требований к поддержке браузера это можно сделать по-разному. Вы должны поддерживать IE7-8? –

Нет, мне нужно только поддерживать WebKit (iOS/Android) – christophercotton

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

Невозможно изменить разметку
Можно не использовать JavaScript
Have Фиксированные высоты и ширина ...

Y ou может использовать абсолютное позиционирование. При использовании + смежного селектора и :first-child мы можем предназначаться элементы по отдельности:

Demo here.

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; 
}

источник

2011-12-29 19:47:27

Я добавил больше комментариев, что может быть много больше, чем набор перечисленных элементов. Например, я не знаю, в какой порядок они появятся. Ваше решение отлично подходит для ограниченных данных. – christophercotton

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

источник

2011-12-29 20:37:56

Да, я видел эту рекомендацию в других вопросах. Еще раз спасибо за указатель! – christophercotton

Как раз собирался предложить то же самое, это действительно похоже на работу для масонства. –

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

ответ

Смежные вопросы