Bir döşemede farklı boyuttaki öğeleri nasıl yüzerim

Soru basittir. Bir kiremit yapacak bir sürü elemanım var. Bununla birlikte, bazılarının daha uzun bir yüksekliği vardır; Diğerleri kadar iki katı diyelim. Hepsinin sadece saf CSS stiliyle bir döşemede eşleşmesini istiyorum. İşte Bir döşemede farklı boyuttaki öğeleri nasıl yüzerim

ben ne var:

enter image description here

Ve bu istediğim şudur: Burada

enter image description here

benim kodudur:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
div { 
    box-shadow: 0 0 1px black inset; 
    width: 100px; 
    display: inline-block; 
} 
#d1, 
#d2, 
#d4, 
#d5, 
#d6, 
#d8, 
#d9{ 
    height: 100px; 
    background-color: yellow; 
} 
#d7, 
#d3{ 
    height: 200px; 
    background-color: red; 
} 
</style> 
</head> 
<body> 
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div> 
</body> 
</html>

Ve yapabilirsiniz JSBin’de canlı olarak dene: http://jsbin.com/usovek/1/edit

Notlar:

içeriği
kutularının sayısı, herhangi bir kutu uzun olabilir
değişebilir dinamiktir. Ve muhtemelen daha geniş.
Kutuların genişliği veya yüksekliği her zaman bir dizi birimdir. Bu örnekteki ünite 50'dir ve bazı kutular 50, bazıları ise 100 piksel yüksektir. Sorun (vardır 1,2,3 ... 50px, 100px, 150px, ...) birimlerinin herhangi bir sayıda

kaynak

2013-03-10 AlexStack

içerik statik ise, olabildiğince için çözüldü Ama eğer mükemmel olurdu nispeten konumlandırılmış kabın içine pozisyon mutlak blokları kullanmak, ancak içerik CSS (Yalnızca) ile bunu yapamaz daha dinamik ise, ne kullanmak gerekir

jQuery Masonry

olduğunu Veya yapabileceğiniz en iyi this olduğunu

CSS

#d7, 
#d3{ 
    height: 200px; 
    background-color: red; 
    float: left; 
}

3 olasılığı: Örtecek kaplarda insde kutuları ve buna göre

Demo (Sadece şeyler Statik When Olası) yüzer :) JQuery Masonluk bağlantıdan

kaynak

2013-03-10 08:01:43

sayesinde. Bu kesinlikle harika. Ancak, mümkünse bunu saf CSS ile yapmayı tercih ediyorum. Ayrıca, elemanların sırasını değiştirmesine rağmen CSS çözümünüzü seviyorum. Eğer hiç kimse daha iyi bir çözüm ile gelmiyorsa, saf CSS ve doğru sırayla, bu cevabı kabul edeceğim. Yolu sizin için saf CSS örnek olsun ama alışkanlık olacak @AlexStack – AlexStack

; senin elemanları :) –

yığılmış ettik "3 Olasılık: konteynerlerin insde kutuları sarın ve buna göre yüzer". Anlamadım Bazı örnek kodlar sağlayabilir misiniz lütfen? – AlexStack

Bir döşemede farklı boyuttaki öğeleri nasıl yüzerim

cevap

İlgili konular