7 NÄ°SAN 2011, PERÅžEMBE
Bir çocuk DIV yapmak için'daha üst DİV CSS kullanarak daha genişliği s yolu var mı?
Bir tarafta üst daha geniş üst kapsayıcı bir DİV içinde bir DİV var çocuk var. Alt DİV tarayıcı alanının aynı genişlikte olması gerekir.
Aşağıdaki örneğe bakın:
Alt DİVgerekirana div olan bir çocuk olarak kal. Ama aslında bu tarayıcı 100% genişlik yapmak için nasıl çözemiyorum onu daha geniş yapmak için alt div keyfi negatif kenar boşluklarını ayarlamak biliyorum.
Bunu yapabileceÄŸimi biliyorum
.child-div{
margin-left: -100px;
margin-right: -100px;
}
Ama çocuk dinamik olan tarayıcı olarak aynı genişlikte olması gerekiyor.
Güncelleme
Cevaplarınız için teşekkürler, en yakın cevap şu ana kadar çocuk DIV pozisyonu yapmak gibi görünüyor: mutlak ve sol set ve 0 sağ özellikler.
Sonraki sorunum var olduğunu üst etti position: relative, başka bir deyişle, sağ ve sol özellikleri hala göreceli veli div ve tarayıcı, bakın örnek: jsfiddle.net/v2Tja/2
Her şeyi darmadağın etmeden pozisyon üst göreli kaldırmak istemiyorum.
CEVAP
22 Temmuz 2014, Salı
Bu soru için daha modern bir çözüm görünüm penceresi ünitesi vw calc() kullanmaktır.
Görünüm penceresi genişliği 0 alt öğe width Set 100vw. O zaman çekil alt öğe eksi P görünüm penceresi genişliği 50%–üst öğegenişlik – ekranın kenarına bir araya getirmek için sola.
.child-element {
position: relative;
width: 100vw;
left: calc(-50vw 50%);
}
Bu, ana öğe position türü önemli değilvealt öğe hala içerik akışı parçasıdır.
calc() vw ve tarayıcı desteği Internet Explorer 9 genel olarak görülebilir .
Not:Bu kutu modeli 15* *ayarlanmış olduğunu varsayar. border-box olmadan da doldurma ve kenarlıkları çıkarmak için, bu çözüm bir karışıklık yapmak zorundasın.
Bunu PaylaÅŸ:
AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR
YORUMLAR
SPONSOR VÄ°DEO
Rastgele Yazarlar
-
BuzzFeedVide
10 AÄžUSTOS 2011 -
Learn word 2
5 AÄžUSTOS 2014 -
Rozetked | Ð
5 AÄžUSTOS 2011
Dinamik olarak kendi başına 1=1 kullan...
Bir resim kullanarak daha yukarı div o...
İPad simülatörü daha büyük yapmak için...
Nasıl div içeriğini daha büyük değil y...
Doğrulama Sunucu Veritabanı Varlık Çer...