Float Üst üste binen Div'ler oluşturur

İki tane div (bir tane diğerinin içinde) var ve bir tane içeride "sol" ile yüzerken biraz sorun yaşıyorum. Sorun şu ki dış div, iç divun içindeki metne uyması için boyunu genişletmiyor. Bu muhtemelen oldukça kafa karıştırıcı olduğundan, bazı kodlarla açıklamaya çalışacağım.Float Üst üste binen Div'ler oluşturur

HTML:

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS:

#div2 { 
    float: left; 
    width: 10px; 
}

Doğrusu bu test edildiğinde bu test etmek için bir şans olmadı olarak aslında benim sorunu göstermektedir umuyoruz. Gerçek kodum, gerekirse bunları oluşturacağım daha fazla özellik var.

kaynak

2009-06-21 PF1

Düzeltmeyi kullanmanız gerekir. Yüzen div'ınızdan sonra ve içeren div içinde aşağıdakileri ekleyin.

<div class="clear"></div>

Ve şu stil eklemek:

.clear { clear:both; }

Örnek:

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

kaynak

2009-06-21 03:49:03 Sampson

Teşekkürler Jonathan: Bu harika çalıştı! – PF1

you genius :) çalışması –

Bu bir düzeltme değil. Sadece açık. Sadece yüzmeyi temizlemeniz gerekiyor :) –

(üçüncü kez bugün :-)) dış div taşma vermek: hidden;
ve genişlik. Eğer html ilave işaretleme eklemek veya dış div için bir genişlik eklemek istemiyorsanız

kaynak

2009-06-21 03:49:55

Gerçekten mi? Bunun için çok üzgünüm, gerçekten. Sanırım, diğer insanların aynı sorunu ne dediğini daha iyi ifade etmek için arama sorgularımı değiştirmeye çalışmam gerekiyor. – PF1

... veya otomatik –

Yükseklikte büyüdüğünden emin olmak için bir öğeye genişlik eklemek CSS kodunu okumayı zorlaştırırsa, bu mantıklı bir çözüm olduğundan şüphe duyuyorum. Zoom: 1 çözüm sanırım daha iyi görünüyor ama muhtemelen w3c css geçerli olmayacaktır. Taşma: aynı zamanda hoş bir çözüm de gizlidir, fakat css'inizi de okumayı zorlaştırır, çünkü içeriği gizlemek için taşma değil, aynı zamanda elemanın boyut olarak büyümesini sağlamak için kullanılır. – Michiel

, şunları kullanabilirsiniz: Belki kullanışlı

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

kaynak

2009-06-21 11:45:12 Emily

Taşma düşündüm: Gizli IE6'da da çalıştı? – alex

Hayır. IE6 için yüzenleri temizlemek için hasLayout'u çağırmanız gerekir. Bu, öğeye bir konum, kayan nokta, ekran, genişlik, yükseklik veya yakınlaştırma verilerek yapılır. Genişlik veya yükseklik vermek, hashsatı çağırmanın en yaygın yoludur, ancak bazen bir boyut belirtmek istemezsiniz ve yakınlaştırma en şeffaftır. Daha fazla bilgi için hasLayout.net adresine bakınız. – Emily

Ah - Ekran ekliyorum: genel olarak taşlanmış elemanlar içeren her şeye blok. – alex

da iyi bildiği Clearfix kodu olduğunu not etmek Bu sorun için özellikle yazılmıştır ve muhtemelen herhangi bir durumda uygulamak için en sağlam ve en kolay olan positioniseverything.

aşağıdaki yapacağını durumunuza kullanmak için

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

kaynak

2009-06-21 17:47:18 Michiel

yükseklik:% 1 tüm sorunumu çözdü. Neden olmasın, emin değilim. Kuyruğunda 2 veya daha fazla yüzen olmayan elemanlı bir dizi yüzer eleman bağlamında neler yaptığını açıklayabilir misiniz? – Emanegux

çözümler üzerinde çalışır rağmen, bunun bir var olduğunu belirtmekte fayda var anlamaya şöyle CSS görünüyor henüz görmedim büyülü hile (bu konuya).

Sadece float # div1 left. Ana öğeyi yüzdüğünüzde, alt öğe otomatik olarak temizlenir - gerçekten yararlı, gerçekten. Kayan yığınların tüm bir düzenini oluşturabilir ve sonunda bir final netleşebilir ve oldukça güvenilir olur.

kaynak

2009-06-22 08:26:18

Maalesef yüzenler oldukça bağımlılık yapıyor. Onları idareli olarak kullanmak ve garip taşma serpmek için en iyi: gizli; – GlennG

Float Üst üste binen Div'ler oluşturur

cevap

İlgili konular