Kutuları HTML'de Yan Yana Görüntüleme

Geçmişte, birçok web sitesi sayfaları düzenlemek için HTML tabloları kullanıyordu çünkü bu yöntem eski Web tarayıcılarında sürekli olarak güvenilir sonuçlar veriyordu. Bu ideal bir çözüm değildi, çünkü tablolar gerçekten sayfaları düzenlemek yerine tablo şeklindeki verileri göstermeyi amaçlıyordu. Tabloların kullanılması aynı zamanda düzenin sayfaya sabit kodlanması anlamına geliyordu ve bu da siteyi güncelleme görevini daha fazla zaman alıyordu. Basamaklı Stil Sayfaları, tasarımcıların öğeleri sola veya sağa kaydırmasına olanak tanıyan "float" özelliğini tanıttı. Bu, sayfa üzerinde daha fazla kontrole izin verir ve site düzenini içerikten ayrı tutma avantajına sahiptir.

1

Bir metin düzenleyici veya HTML düzenleyici açın ve yeni bir HTML belgesi oluşturun.

2

Aşağıdaki kodu sayfa gövdesine ekleyin:

Bu, ilk div'deki metindir Bu, ikinci div'deki metindir

Sayfayı kaydedin ve Web tarayıcınızda açın. İkinci div'deki içeriğin, birinci div'deki içeriğin altında görüntülendiğini göreceksiniz.

3

Aşağıdaki CSS kodunu HTML belgenizin bölümüne ekleyin:

Değişiklikleri görüntülemek için sayfayı kaydedin ve tarayıcınızda yenileyin. CSS kuralı, "myContainer" div içine yerleştirilmiş her iki div'i de hedefler. "Float" özelliği, tarayıcıya div'leri sola kaydırmasını söyler - div'leri içeren div'in sağ kenarına kaydırmak için float değerini "right" olarak değiştirebilirsiniz. Bölmeler, 300 piksellik sabit bir genişliğe ayarlanmıştır ve mizanpajın daha kolay görülmesini sağlamak için 1 piksellik siyah kenarlığa sahiptir. Tarayıcınızda, kutuların artık yan yana görüntülendiğini göreceksiniz.

4

Aşağıda gösterildiği gibi, "myContainer" div dışında, sayfa gövdesine üçüncü bir div ekleyin:

Bu, birinci div'deki metindir Bu, ikinci div'deki metindir Bu, üçüncü div'deki metindir

Sayfayı kaydedin ve tarayıcınıza yeniden yükleyin. Üçüncü div'in, yüzdürülmemiş olmasına rağmen birinci ve ikinci div'lerin yanında görüntülendiğini göreceksiniz. Bu, kalan HTML öğelerinin yüzen öğelerin etrafında akması nedeniyle oluşur. Bu, bazı durumlarda istenen davranış olabilir, ancak bu örnekte, üçüncü div'in bir altbilgi oluşturmak için yüzen div'lerin altında görüntülenmesini istiyoruz.

5

Aşağıdaki kuralı sayfanın başındaki stil bölümüne ekleyin:

clear: both; 

}

Bu, üçüncü "myFooter" div öğesini hedefler ve tarayıcıya float işlevini durdurmasını ve sonraki HTML öğelerini "myContainer" div öğesinin altında görüntülemesini söyler. Sayfayı kaydedin ve yenileyin. Üçüncü div tarafından oluşturulan altbilginin artık kayan div'lerin altında görüntülendiğini göreceksiniz.