Resimde gördüğünüz gibi, her kutu farklı bir yüksekliğe sahiptir ve çift genişliğe sahip bazı kutular vardır.YALNIZCA CSS ile Yığma tarzı Düzen Sayfa:
bir yığma tarzı düzeni yalnızca CSS ile oluşturmak mümkün mü?
css3 desteği ile bunu yapabilirsiniz:
.container {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
width: 360px;
}
.container div {
display: inline-block;
width: 100%;
background-color: red;
}
hiçbir css3 desteği ile, maalesef js başvurmak zorunda.
Dediğim gibi, çift genişliğe sahip bazı kutular var! (Bu durumda 2 sütun). Ve evet, CSS3'ü kullanabilirim! – Bernat
Uzun süredir keşfettim, sadece CSS ile mümkün değil. – alt
Bu çözümle ilgili sorun, öğelerin yukarıdan aşağıya, soldan sağa doğru düzenlenmiş olmasıdır, oysaki genellikle bekledikleri (mazaret edilen kültürel varsayımlar) soldan sağa, yukarıdan aşağıya doğru düzendir. Bu, sıradan CSS3 sütunlarına dayalı öneriler için showtoppertır. –
Şu anda aynı türden bir yerleşimde, arada sırada çift genişlikli kutuya sahip iki sütun üzerinde bir sitede çalışıyorum. Yaptığım şey, içeriğin geri kalanından iki katını ayırmak. Örneğin:
<div class="two-columns">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Sonra CSS3 sütun çözümü sadece two-columns sınıf için geçerli olabilir. IE9'u desteklemeniz gerekiyorsa, bir JavaScript fallback eklemeniz gerekir.
hey buddy Bu siteyi hatırlıyorum eğer kontrol etmek isteyip istemediğinizi bilmiyorum Gerçekten js veya saf css ile çalışıp çalışmadığını hatırlamıyorum ama eminim ki duvarcılık kullanmıyor http: //www.leica- oskar-barnack-award.com/ umarım yardımcı olur – Paradise
Aradığınız kod nerede? Çevrimiçi sanal alanınız veya jsfiddle nerede? SO üzerinde arama yapmış olsaydınız, Masonluğun CSS ile çoğaltılmasının mümkün olmadığını ve çapraz tarayıcı ve cihazlar arası çalışmasını sağladığını fark etmiş olursunuz. – Systembolaget
Kolayca al ve yavaşça nefes al ...;) – Bernat