CSS göreli + float

Question

3 divs dizilmiş; div merkezi çok sayıda position:absolute görüntü içerir (üst üste biner - bir görüntü bir anda görünür; geri kalanı jQuery cross-fading için display:none;'dür).

Çocuğun görüntülerinin position:absolute olmasını sağlamak için orta div değerini position:relative olarak değiştirdim. Ama sol, orta ve sağ div değerini float:left olarak ayarlarsam, şu sırada görüntülenmez: sol, orta, sağ div (solda ve sağda solda toplanır).

Eğer position: relative'u merkez div üzerinde çıkarırsam, işe yarıyor (ama görüntüler kesinlikle div içinde kesinlikle konumlandırılamaz).

Bu divları, görüntüler merkeze tam olarak yerleştirilebildiğim için sola, ortaa, sağa, böylece nasıl yerleştiririm? Sol ve sağ divlar için de rölatif ayarlamalı mıyım?

Answer 1

Her sütun için aşağıdaki CSS kullanarak bunu yapabilir. aksi takdirde aynı üst pozisyonda olmayacak şekilde, her iki # sol div-ve # div sağ HTML önce # div-merkez yer almalıdır dikkate alın.

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

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

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

Temel olarak, sol ve sağ divlar sabit bir genişlikle her tarafa taşınır. Daha sonra orta div, her tarafta yüzen divların genişliğine eşit bir sol ve sağ marj atanır. Çünkü, marjlar sayesinde, merkez div yüzerlerin arasına sığar, aralarında mükemmel bir şekilde hizalanmış görünür.

Konum: düzen için göreli öznitelik gerekli değildir (ekledim çünkü bu div içindeki diğer nesneleri konumlandırmanız gerekir).

Sabit bir genişliğe sahip olması için tam yerleşime ihtiyacınız varsa (örneğin, sayfanın 980 piksel genişliğinde olmasını istiyorsanız), bu genişliğe sahip bir div oluşturun ve içindeki üç divı ekleyin.

Burada eylem örnek görebilirsiniz

: http://jsfiddle.net/7pBVX/

Answer 2

@jasie bunu :-) görüntü için bu http://jsfiddle.net/sandeep/ANvJe/