Mutlak konumlu div genişliği, üst öğesinin genişliğine göre değişir?

Ebeveyn yerine, içeriğine bağlı olarak mutlak konumlu bir div genişliğine sahip olmak isterim. ebeveyninin genişliğine bağlıdır http://jsfiddle.net/ymgfN/2/Mutlak konumlu div genişliği, üst öğesinin genişliğine göre değişir?

İç div genişliği gibi görünüyor gösterildiği gibi Örneğin,

<div style="position:absolute"> 
<div style="position:absolute"> 
    <div style="position:absolute">Div in Div</div> 
</div> 
</div>

konumunu mutlak olsa, sözcük kaydırmayı neden olacaktır. Örneğin, üst öğesinin genişliğini belirtirsek, beklendiği gibi çalışacaktır (sözcük kaydırması yok): http://jsfiddle.net/ymgfN/3/

Ne yazık ki, üst öğenin genişliğini önceden belirleyemem. onun çocukları. Ve mutlak pozisyon kullanmalıyım. Saf CSS'de mümkün mü?

Bazı arka plan: Bazı tasarım yerine getirmek için bir sayfa yapmaya çalışıyorum değilim - Ben herhangi bir makul talebin üç yığılmış mutlak bir konuma sahip olmak delilik biliyorum. Daha ziyade, mutlak konumlandırmanın bir dizi düzen problemini çözmek için genel bir yaklaşım olup olmadığını (genellikle statik/mutlak/yüzdürmenin akıllı kullanımını gerektiren çok yönlü karmaşık bir düzen) olup olmadığını görmek için bazı deneyler yapıyorum. Ne yazık ki, her yerde mutlak pozisyonu kullanma fikrini uyandıracak bu meseleye girdim.

kaynak

2012-03-16 Tom Yeh

bunu ardından üst alt öğesi genişliğine ayarlar alt öğe var genişliği belirtirseniz. Aradığın şeyin bu olduğundan emin değilim! – iDroid

Öğe, genişliğini ve yüksekliğini önce alır ve belgenin akışından kaldırılır. Dış elemanı kesinlikle yerleştirdiğinizde, akıştan çıkarılır ve anında içeriğe sahip olmadığı için, 0 genişliğinde ve 0 yüksekliğinde olur. Bu nedenle, içindeki metin ekleme girişiminde bulunan başka bir bölme öğesi, üst öğenin 0 genişliğini miras alır. Bu yüzden, yalnızca içeriğe izin vermek için en uzun kelimenin genişliğine yayılacak ve ardından her şeyi yeni satırlara bölecek. 'dan sonra, belgenin kendiliğinden kapanması için belgenin akışını kaldırır.

Yani, evet ilk soruyu cevaplamak için, mutlak olarak konumlanmış öğesi element üzerine bir genişlik ve/veya yükseklik belirtmek yoksa onun ebeveyn elemanın boyutlarına dikkat yapar. Çocuklarınızın genişliğinin ne olduğunu biliyor musunuz?

İkinci sorunuz için white-space: nowrap'u kullanabilirsiniz. Gerçekten de mükemmel bir çözüm değil. Daha iyisi, içeriğinizi düzenlemenin daha iyi bir yolunu bulursunuz, böylece birbirinizin içine yerleştirilmiş üç tamamen yerleştirilmiş öğeye ihtiyacınız olmaz. Bunları kullanmak için 'un olduğunu mu söylüyorsun? Gerçekten mi? Bunu yapmanın daha iyi bir yolunu bulamamış olman daha olasıdır, ama eğer o yoldan gitmeyi seçersen başka bir soru için.

kaynak

2012-03-16 05:15:42 animuson

Evet, beyaz boşluk kelime sarmayı önler, ancak yalnızca ekran (yani, gövde) onu tutamadığında sarılabilir mi? Yani, ebeveynin genişliğinin% 100'e ayarlanmış olması gibi bir etkiye sahip olmak (aslında biz onu ayarlamamıza rağmen, çocuğa bir CSS özelliği koymak gibi)? –

@tomyeh: Şu an düşünebilmemin tek yolu şu şekilde ayarlanıyor: sol: 0; sağa: elemanların üzerinde 0 've sonra genişliğini her ayarladığınızda 'right' özelliğini kaldırın. – animuson

+1. Genişlik hakkında açıklama bekliyordu (bu konuyla ilgili olarak (http://stackoverflow.com/questions/24713900/the-a-tag-content-goes-to-a-new-line/24714269#24714269)) kesinlikle konumlandırılmış elemanların çocukların ve hiçbiri bulunamadı. Bu konuda tökezlemeden önce uzun bir zaman aldı. Aramada neden yükselmediğini merak ediyorum. Bunun için cevabın kabul edilmesi gerekiyor mu? – Harry

position: absolute veya numaralı bir blok seviyesi öğesi, hiçbir sabit width ayarlanmamışsa üst öğesinin genişliğine otomatik olarak bağlanır. Alt öğe için sabit bir genişlik istemiyorsanız, bunu çok yüksek bir margin-right vererek, örn. sadece içeriğine bağlıdır pratikte bu

.inner-div { 
    position: absolute; 
    margin-right: -10000px; 
}

sonra genişliği, ana eksi negatif sınırlı genişliğine bağlı olacaktır.

Güncellenen keman: http://jsfiddle.net/ymgfN/53/

kaynak

2015-11-18 17:45:40

Mutlak konumlu div genişliği, üst öğesinin genişliğine göre değişir?

cevap

İlgili konular