пытаясь создать div ниже div css - PullRequest
Новая
       3

пытаясь создать div ниже div css

3 голосов
/ 02 июня 2011

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

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

У меня есть блок div, чьи макеты CSS одинаковы, но они не похожи друг на друга.Почему второй выглядит совершенно не так, как первый, почему я не могу сделать «копию» первого и поместить его ниже первого?

Вот код.Вверху находится нужный скроллер, это нужный эффект.http://jsfiddle.net/7YueC/

Ответы [ 4 ]

2 голосов
/ 02 июня 2011

Снимите ID s с div s и / или добавьте класс .same, а затем переключите стили #lasteventimg на .same. Удалить стили #2.

Скрипка: http://jsfiddle.net/7YueC/7/

2 голосов
/ 02 июня 2011

Вам не нужно использовать абсолютное позиционирование для позиционирования одного делителя ниже другого.

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

1 голос
/ 02 июня 2011

, поскольку вы пытаетесь добиться одинакового эффекта как для divs, так и для всех содержащихся в нем элементов - почему бы не определить class, который применяется к каждому div.div является элементом уровня блока, поэтому по умолчанию они будут накладываться друг на друга - абсолютное позиционирование не требуется.

Вот ваш код с добавлением класса eventimg и слегка измененным CSShttp://jsfiddle.net/ZXGUt/

0 голосов
/ 02 июня 2011

Как упоминалось ранее, если вы дублируете один и тот же эффект на двух элементах div, измените стиль на класс и используйте его на обоих. Во-вторых, идентификатор не может начинаться с цифры, иначе стиль не вступит в силу. Измените его на secondEventImage или аналогичный. Если вы программируете сайты, я бы предложил использовать Firefox и плагин Firebug. Он позволяет вам проверить, применяется ли стиль, и быстро отредактировать, чтобы увидеть, как все будет до внесения изменений в код.

CODE - Пример 

 div#two {margin-left: 10%;margin-right: 10%;overflow-x: scroll;overflow-y: hidden;}
 div#two ul {list-style: none;height: 100%;width: 8000px;}
 div#two ul li{float:left;}
 div#two img {width: 200px;float: left;}

 OR

 div.sameDivs {..........}
 div.sameDivs ul {..........}
 div.sameDivs ul li {..........}
 div.sameDivs img {..........}
 <div id="lasteventimg" class="sameDivs"> ....... </div>
...