CSS позиционирование блоков с использованием ul li div

Question

Пример JSFIDDLE внизу

Я хочу сделать следующий макет CSS, и в настоящее время я использую UL, чтобы сместить левую левую сторону. Проблема в том, что 2 прямоугольника не останутся с обеих сторон. И не уверен, как расположить нижние 2 прямоугольника.

Я попытался завернуть div в середине UL LI, но это не правильная разметка. Пожалуйста, вы можете помочь? Возможно, пример JSFIDDLE, если вы могли бы? Спасибо

РЕДАКТИРОВАТЬ: Вот, пожалуйста, jsfiddle.net / fpqxy / 1 поля 2 и 3 находятся в положении, но 4 и 5 должны быть ниже них. Затем поле 6 необходимо переместить через 7 и 8, оставшиеся внизу. -

Answer 1

см. Ниже скрипку и демо

Скрипка: http://jsfiddle.net/fpqxy/5

Демо: http://jsfiddle.net/fpqxy/5/embedded/result/

Answer 2

Таблицы, тьфу!

Сгруппируйте блоки 2-5 в элемент обертки, тогда ваш поток будет:

1, 2-5, 6, 7, 8

Это будет работать только в том случае, если все ваши ящики имеют одинаковую высоту в данном «ряду».

Надеюсь, это поможет.