DIV'ler ve CSS ile Çalışmak

Question

Tamam, eğer bana bu konuda yardımcı olabilecek herhangi bir kişi çok minnettar olurdu. kopyalayıp aşağıdaki yapıştırın ve IE veya Firefox

kadar açarsanız

<div style="border: solid 1px navy; float: left;"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 
<div style="background-color: blue;"> 
    <p>Some Text</p> 
    <p>Another paragraph</p> 
</div> 

Neden mavi bir arka plana sahip ikinci div öğelerin listesini içeren ilk div arkasında olmak genişliyor? İlk divun yanında gerçekten yüzmeyi nasıl sağlayabilirim? Listede yanında olmak mavi kutu istiyorsanız

Answer 1

, siz de bunu yüzer gerekir: öyle sanki

birinci div sola süzülüyor edilir

<div style="border: solid 1px navy; float: left;"> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 
</div> 
<div style="background-color: blue; float:left;"><p>Some Text</p><p>Another paragraph</p></div> 

Answer 2

, ikinci div konumlandırılmış yok (ikinci div içindeki herhangi bir metin yüzer div etrafında akacak olsa da). Yüzen elemanların davranışı hakkında daha fazla bilgi için bkz. the CSS2 specification.

İkinci divi birinci divin yanına kaydırmak için ikinci div'a float: left ekleyebilirsiniz.

Alternatif olarak, birinci divın genişliği biliniyorsa, ikinci boşluk için sol kenar boşluğu ekleyebilirsiniz.

Answer 3

o kadar 2 div genişleyen genişliğini korur çünkü 2 div

Bu farklı etmek overflow: auto; zoom: 1.0; ekleyin (ve daha yakın isteneni bazı anlamda) 2 div üzerinde float: left; koyarak daha kodlama genişliği değerleri olmadan sağa mümkün. IE'de eleman yerleşimini vermek için zoom: 1.0; gereklidir.

<div style="border: solid 1px navy; float: left;"> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 
</div> 
<div style="background-color: blue; overflow: auto; zoom: 1.0;"><p>Some Text</p><p>Another paragraph</p></div> 

Answer 4

İkinci divanın ilkinin yanında yüzmesini ister misiniz? Sonra ikinci div'a float:left eklersiniz.

, temizleme için yalnızca bir başka boşluk oluşturmayın, bu çok korkutucu değildir.

DÜZENLEME: overflow: auto, IE için çalışmaz, 0L'ekleme ekini içeren veya yapamayacağınız sabit bir boyuta zorlayan div hasLayour'u vermeniz gerekir. Geçerli bir çözüm olduğunda hacklemeyin. Yüzmesini ve float kullanmasını istiyorsun.

Answer 5

Tanımladığınız davranışı gördüğünüz nedeni, bunların DIV'leri verdiğiniz yönergeler olmasıdır.

en yıkmak edelim: İşte bu yüzen tarafından sınırın dışında her şey için varsayılan davranış güvenerek ve

<div style="border: solid 1px navy; float: left;"> 

, bunun ebeveyn var (sol kenar boşluğuna kendini pin için kutuyu anlatıyorsun, Burada hangi cismin ait olduğuna bakılmaksızın, buradaki bedenin olduğu varsayılır. DIV'nin varsayılan genişliği, üst nesnenin genişliğinin% 100'udur (yine de gövde etiketi). Varsayılan konum, akıştaki bir sonraki blok elemanıdır - başka bir blok elemanı olmadığından, dikey olarak üst kenar boşluğu ile hizalanır.

<div style="background-color: blue; float:left;"> 

temelde aynı şeydir:

Sonra bunu yapmanın başka DIV istedi.Burada, DIV'ye yeni bir genişlik ya da paftada nereye gitmeleri gerektiği ile ilgili herhangi bir ek talimat vermediniz, böylece sol kenar boşluğuna sabitlenir ve üst kenar boşluğu en yakın blok elemanını sabitler (hala gövde)).

bu aşağıdakileri yapın yan yana sıraya almak için:

<style type="text/css"> 
    .leftBox, .rightBox 
    { 
     width: 48%; /*leave some room for varying browser definitions */ 
     border: 1px solid navy; 
     float: left; 
     display: inline; /* follow the semantic flow of the page and don't break the line */ 
     clear: left; /* don't allow any other elements between you and the left margin */ 
    } 

    .rightBox 
    { 
     border: none; 
     background-color: blue; 
     clear: right; 
    } 
</style> 
<div class="leftBox"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 
<div class="rightBox"> 
    <p> 
     some other text</p> 
</div>