İçerik
Gece yarısı ve o div siteniz hâlâ bir çocuğun oyuncak sandığına benziyor. Tüm öğeler karışık bir karmaşadır ve CSS’ler ile her oynadığınızda Görüntüle mülkiyet, kendilerini tamamen farklı bir saçmalıkta yeniden düzenlerler.
Eğer benim gibiyseniz, bunu muhtemelen nefesinizin altında mırıldanarak ve klavyenizle sürekli olarak daha agresif hale gelerek çözeceksiniz. Bu strateji benim için daha önce işe yaramış olsa da, kısa süre önce şunu anlamanın daha iyi bir yolunu bulmaya başladım. Görüntüle Emlak.
Temelleri ortaya çıkıyor Görüntüle başlangıçta düşündüğümden çok daha basit. Aslında, bir valizi paketlemekle aynı ilkeleri kullanırlar. Ben ele alacağım Ekran bloğu, satır içi blok ve Çizgide. Daha önce düzenli bir şekilde bir valiz düzenlediyseniz, paralelini göreceksiniz. Tüm giysilerinizi gelişigüzel bir şekilde sıkıştıran türden biriyseniz - peki, sizin için yapabileceğim çok şey var.
Bavulumuzda üç tür giysi bulunacak:
- Hassas, yakalı bir gömlek gibi
- Sarılabilen tişörtler
- Boşluklara doldurulabilen çoraplar veya iç çamaşırları
Referans olarak, çantayı HTML'de modellediğimizde, şöyle görünecektir:
div class = 'bavul'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Üstte narin öğeler
Ekran bloğu çoğu HTML öğesi için varsayılandır. Bu, elemanın konteynerindeki tüm yatay alanı kapladığı anlamına gelir. div. Diğer kardeş öğelerin yanındaysa, yeni bir satıra başlar ve satırındaki diğer öğelere izin vermez. Bavulunuzun üstüne koyduğunuz narin eşyalara benzer. Bunlar, yakalı gömlekler gibi narin veya akıllı eşyalardır. Onların buruşmasını istemezsiniz, bu yüzden diğer kıyafetlere doğru itilmemelerine dikkat edin.
Bu, işin en zor kısımlarından birini ortaya çıkarır. Ekran bloğu. Yakalı gömleğin çantanın tüm genişliğini kaplamadığına dikkat edin? Bu, diğer öğelerin kendi seviyesine sıçrayacağı anlamına gelmez. Diyelim ki bu gömlek bavul genişliğinin yüzde 60'ı; yine de diğer öğelerin ona en üst düzeyde katılmasını engelleyecektir.
Bu yüzden resimde turuncu bir bordür var. Bir Ekran bloğu eleman, tüm yatay alanı kaplamıyorsa, çevresine otomatik olarak bir kenar boşluğu ekleyecektir.
Özenle paketlenmiş tişörtler
Seyahatiniz için valizinizin çoğu muhtemelen diğer giysilerinizle dolu. Basitlik uğruna, bunu sadece tişörtlere indirgeyeceğiz. İnternette katlamanın mı yoksa yuvarlamanın mı daha verimli olduğu konusunda büyük bir tartışma var. Ben katlanabilen bir insanım.
Her neyse, en çok eşyayı sığdırmak için tişörtlerinizi yan yana sıralayın. Bu tam olarak ne ekran: satır içi blok içindir. Bu elemanlar aynı satırda yan yana veya yan yana oturabilir. ekran: satır içi elementler.
Aksine ekran: satır içi elemanlar, bir satır içi blok öğesi, içerdiği içeriğe uymazsa sonraki satıra geçecektir. div diğerinin yanında satır içi blok elementler. Bir sonraki sıraya bir tişörtün dökülmesini sağlamak için, onu ikiye kesmeniz ve kalan yarısını yeni bir sıra başlatmak için kullanmanız gerekir. Satır içi blok bir hatta sığmazlarsa elemanların ikiye bölünmesine izin verilmez.
Boşlukları dolduran çoraplar
Orijinal HTML'yi tekrar kontrol edin ve bir çorap olduğunu fark edeceksiniz div> sekiz T-shirt arasında. Ancak sağdaki valizin yatay görüntüsüne bir bakın. Bir tane çorap varsa div>, nasıl orta sırayı bitirip alt sıraya başlayabilir? Bu amacı ekran: satır içi!
Bir Çizgide öğe genişliğini aşarsa sonraki satıra taşar. div (bu şekilde farklıdır satır içi blok veya blok). Çoraplarımızdan beri div Boşluklara gelişigüzel doldurulmuş çoraplarla doludur, orta sıranın sağ tarafındaki boşluğu kolayca doldurmaya başlayabilir ve alt sıraya başlamak için üzerine dökülebilir.
Bunun olması için hiçbir çorabın ikiye kesilmesi gerekmeyecek. Bu yüzden olabilirler ÇizgideTişörtler yalnızca satır içi blok. Orta sıradaki tişörtler genişliğin yalnızca yüzde 60'ını kapladıysa, çoraplar div> satırın geri kalanında tüm alanı doldurmak için yukarı hareket eder.
İyi yolculuklar
Bu, valizimiz için son CSS'dir:
.delicate {display: block; genişlik:% 60; } .tshirt {display: inline-block; genişlik:% 20; } .socks {display: inline; }
Aşağıda, ekranın farklı kullanımlarını göstermek için birkaç alternatif senaryo verilmiştir. Üstteki hassasların ekran: satır içi blok, tişörtlerin yanına sığarlardı. Tişörtlerin bir kısmı en üst sıraya yükselir ve geri kalanı buna göre ayarlanır. Yakalı gömleğin solunda ve sağında rahat bir tampon olmayacaktı.
Her tişörtün olsaydı Ekran bloğu, her satırda bir tane olmak üzere üst üste devasa bir T-shirt yığını olurdu. Çoraplar olsaydı ekran: satır içi blokiki sıra arasında akmaktansa hepsi alt sıraya otururdu. Bazı tişörtler, dördüncü bir çizgi oluşturacak şekilde başka bir sıraya itilirdi. Tişörtlerin orta sırasının sağında bir boşluk olacaktı.
Burada özetlediğim yöntemle, mevcut alanı en iyi şekilde kullanan düzgün bir şekilde paketlenmiş bir bavul elde ediyoruz.
Bu makale ilk olarak şurada yayınlandı: net dergi sayı 289; buradan satın al!
