Верстка в две колонки
Вложений: 1
Подскажите, может возможно реализовать такую верстку.
Имеется 2 набора элементов (например блоков DIV): левая колонка - набор элементов a, правая колонка - набор элементов b. Получается нужно сделать так, чтобы элементы a были всегда слева. А элементы b всегда справа. Причем: например, если нет элементов a то элементы b всё равно находятся справа (см. картинку 3). Но это еще не всё: необходимо чтобы любой элемент можно было увеличить по ширине на всю строку, а элемент находящийся с ним на одной линии перешел на следующую строку (см. картинку 1 и 2). Задачу с картинки 1 и 2 я частично решил используя float:left и float:right. Но возникает проблема, что элементы перескакивают не в свою колонку (как описал к картинке 3). Иными словами хотел бы узнать(какая нить хитрость на CSS), можно ли как-то элементам b указать что они не могут стоять в левой колонке, а элементы a в правой? Если никакой хитрости верстки не придумать, то тут видимо только верстка таблицей, с перемещением содержимого ячеек на JS. Спасибо. |
Покажите код, из объяснений хрен поймёшь в чём проблема.
|
Да код любой, например:
JS с использованием mootools: <script language="javascript"> function open_child(iId) { var miniSize = $("mini_"+iId); var fullSize = $("full_"+iId); if(miniSize.hasClass("open")) { miniSize.removeClass("open"); miniSize.addClass("close"); fullSize.removeClass("close"); fullSize.addClass("open"); } } function close_child(iId) { var miniSize = $("mini_"+iId); var fullSize = $("full_"+iId); if(miniSize.hasClass("close")) { miniSize.removeClass("close"); miniSize.addClass("open"); fullSize.removeClass("open"); fullSize.addClass("close"); } } </script> HTML код: <div class="m1"> <div id="full_1" class="left close fullSize" onclick="close_child(1)">1111111111111111</div> <div id="full_5" class="right close fullSize" onclick="close_child(5)">1111111111111111</div> <div id="mini_1" class="left open miniSize" onclick="open_child(1)">1</div> <div id="mini_5" class="right open miniSize" onclick="open_child(5)">1</div> <div id="full_2" class="left close fullSize" onclick="close_child(2)">22222222222222222222</div> <div id="full_6" class="right close fullSize" onclick="close_child(6)">2222222222222222222222</div> <div id="mini_2" class="left open miniSize" onclick="open_child(2)">2</div> <div id="mini_6" class="right open miniSize" onclick="open_child(6)">2</div> <div id="full_3" class="left close fullSize" onclick="close_child(3)">333333333333333333333</div> <div id="full_7" class="right close fullSize" onclick="close_child(7)">33333333333333333333333</div> <div id="mini_3" class="left open miniSize" onclick="open_child(3)">3</div> <div id="mini_7" class="right open miniSize" onclick="open_child(7)">3</div> <div id="full_4" class="left close fullSize" onclick="close_child(4)">44444444444444444444444</div> <div id="full_8" class="right close fullSize" onclick="close_child(8)">4444444444444444444444444</div> <div id="mini_4" class="left open miniSize" onclick="open_child(4)">4</div> <div id="mini_8" class="right open miniSize" onclick="open_child(8)">4</div> <div class="clear"></div> </div> CSS код: .m1 { margin:0 auto; } .miniSize { width:392px; } .fullSize { width:784px; } .left { float:left; background:#66FFFF; border:#999999 1px solid; } .right { float:right; background:#FF99FF; border:#999999 1px solid; } .open { display:block; } .close { display:none; } Проблема: нужно заставить элементы и с классом left (и miniSize) отображаться только слева, а с классом right (и miniSize) только справа. С классом fullSize выводится на всю ширину ( width:784px; ). |
/*.close { display:none; }*/ .m1 {width: 788px} и вроде всё в потоке, или я не понял цель игры... |
Цитата:
В блоках с id="mini_1...8" расположены краткие тексты комментариев. Также эти комментарии поделены на 2 столбика, левый и правый (классы left и right соответственно). Эти комментарии изначально видны. В блоках с id="full_1...8" расположены подробные тексты комментариев этих же комментариев (mini_1 соответствует комментарию full_1). Эти блоки отображаются на всю строку, но изначально они скрыты (класс close). При клике на краткий текст комментария должен открыться блок с полным текстом комментария, причем блок с кратким текстом должен скрыться(чтобы лучше представить положение блоков после клика я нарисовал картинку см. выше). Проблемы которые не смог решить: если например в правой колонке нет комментариев, то она наполнится из элементов левой колонки (это нужно исключить). Также при клике по правому комментарию, комментарий слева отображается в правой колонке. Если честно то думаю это можно решить только кучей JS и скорее всего с табличной версткой. |
Цитата:
|
Цитата:
<div id="mini_1" class="left open miniSize" onclick="open_child(1)">1</div> <div id="mini_5" class="right open miniSize" onclick="open_child(5)">1</div> <div id="full_1" class="left close fullSize" onclick="close_child(1)">1111111111111111</div> <div id="full_5" class="right close fullSize" onclick="close_child(5)">1111111111111111</div> |
Serg_pnz,
Большое спасибо! |
Можно было бы сделать:
float:left; clear:left; float:right;clear:right;и не париться. |
Часовой пояс GMT +3, время: 06:34. |