CSS Позиционирование DIVs является гибким и отзывчивым

У меня возникла проблема с использованием CSS для правильной установки DIV. Любая помощь будет невероятно оценена!CSS Позиционирование DIVs является гибким и отзывчивым

Проблема:http://teamcoding.ca/leisure/specialevent/ На сайте, я хочу «событие» ДИВО стек поверх каждый ответно независимо от высоты, как это делается с помощью этого сайта: http://themify.me/demo/#theme=grido Пути моего сайта вынесенного DIV с наибольшая высота подталкивает все остальные DIV. Например, если вы расширите его, чтобы иметь три столбца, div # 5 должен быть ниже div # 1.

JS Fiddle:http://jsfiddle.net/QQFpD/4/ Вот мой код. Я подумал, что легче разместить его на JsFiddle, а не в поле msg. (Пожалуйста, дайте мне знать, если я также разместил здесь свой код.)

источник

2012-06-10 mcranston18

Это характер поплавков. Страница примера (themify) также смешивает элементы (характер float), но как-то может закрыть пробелы. При ближайшем рассмотрении мы видим, что существует некоторая динамическая взаимосвязь между настройкой ширины браузера и ширины окна, поскольку DOM обновляется до новой абсолютной позиции, верхних значений. Ваше решение должно быть в jQuery, а не в статическом CSS.

источник

2012-06-10 19:55:00 mtf

Спасибо за комментарий mtf. Чтобы быть уверенным, вы говорите, что я могу только выполнить динамическое взаимодействие между DIV (в соответствии с примером), используя jQuery? – mcranston18

Хотя я и не использовал плагин самостоятельно, я думаю, что ** [jQuery Masonry plugin] (http://masonry.desandro.com/) ** может помочь. – Jeroen

Ваша проблема в том, что было указано выше природы поплавков. Вам нужно подумать о том, как вы позиционируете события в терминах столбцов. Хороший способ справиться с этим и держать макет жидкости с помощью поплавка бы создать сетку, как это, единственным недостатком является немного дополнительной, не семантический код:

/* __row 
* A row of columns, we define total page width here */ 
.row  {width:960px; height:100%; margin: 0 auto; position:relative;} 

/* __grid 
* Master Grid Layout elements */ 

.col1, .col2, .col3, .col4, .col5, .col6 { 
    position:relative; 
    height:100%; 
    float:left; 
    margin-left: 2%; 
}

Работа с процентами позволяет изменить общая ширина с .row и расширьте наши столбцы, чтобы они соответствовали.

.col1  {width: 15%;} 
.col2  {width: 32%;} 
.col3  {width: 49%;} 
.col4  {width: 66%;} 
.col5  {width: 83%;} 
.col6  {width: 100%; margin-left:0;} 
.colFirst {margin-left:0;} 
.colClear {clear:both;}

С его помощью создать 3 колонки макет для жидкости:

<div class="row"> 
    <div class="col2 colFirst"> 
     <ul> 
      <li>1st item</li> 
      <li>2nd item</li> 
     </ul> 
    </div> 
    <div class="col2">... second column div's/data</div> 
    <div class="col2">... third column div's/data</div> 
    <div class="colClear></div> 
</div>

Таким образом, вы данные будут все попадают в колонны и потечет seemlessly вниз страницы, давая точный способ вы хотите рассматривать , и в чистом CSS.

источник

2012-06-10 21:08:50

CSS Позиционирование DIVs является гибким и отзывчивым

ответ

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