CSS relative + float - программирование

У меня 3 divs выстроились; центр div имеет много изображений position:absolute (которые перекрываются - одно изображение видимо за раз, остальные display:none; для перекрестного затухания jQuery, которое не является родным).

Я изменил центр div на position:relative, чтобы его дочерние образы были position:absolute. Но, если я устанавливаю левый, центральный и правый div на float:left, он не отображается в порядке: левый, центральный, правый div (слева и справа сгруппированы вверх слева).

Если я вывожу position: relative в центре div, он работает (но изображения, конечно, не могут быть абсолютно расположены внутри родительского div).

Как разместить эти divs так, чтобы я оставил, в центре, справа, в то время как изображения могут быть абсолютно расположены внутри центра? Должен ли я устанавливать относительный для левого и правого divs тоже?

Ответ 1

Вы можете сделать это, используя следующий CSS для каждого столбца. Учтите, что как # div-left, так и # div-right должны отображаться в HTML до # div-center, так как иначе они не будут находиться в том же верхнем положении.

 #div-left {
    float: left;
    width: 100px;
 }

 #div-center {
    margin: 0 100px;
    position: relative;
 }

 #div-right {
    float: right;
    width: 100px;
 }

В принципе, левая и правая divs плавают с каждой стороны с фиксированной шириной. Затем центру div присваивается левое и правое поле, равное ширине divs, плавающих с каждой стороны. Поскольку, благодаря полям, центр div находится между поплавками, он выглядит идеально согласованным между ними.

Позиция: относительный атрибут не нужен для макета (я просто добавил его, потому что вам нужно поместить другие объекты внутри этого div).

Если вам нужен полный макет с фиксированной шириной (скажем, вы хотите, чтобы страница занимала ширину 980 пикселей), просто создайте div с этой шириной и включите в нее три div.

Здесь вы можете увидеть пример: http://jsfiddle.net/7pBVX/

Ответ 1

Ответ 2