CSS ve JavaScript kullanarak özelleştirilebilir, dinamik ızgara düzeni nasıl oluşturulur?

Question

Çok sayıda CSS içeren bir proje üzerinde çalışıyorum. Müşteri, ana sayfada, UI bileşenlerini sürükle ve bırak yöntemiyle yeniden düzenleyebildiği bir ızgara düzenine sahip olmak ister. Bu UI bileşenleri farklı boyutlarda olabilir: 1x1, 2x2 ve 3x3. İstenen yeni yerde bir UI öğesi bıraktığımda, diğer bileşenleri bir kenara itmeliyim. Herhangi bir olası delik 1x1 bileşenlerle doldurulmalıdır. Ben ortada bileşeni Damlama 2x2 bileşeni

draging bir bileşeni

draged gelmiş Önce

How it should work

1. , iki 1x1 bileşenleri yer açmak ve 2x2 etrafında adapte

ızgaranın boyutu 8 1x1 sınırlı değildir Not, ancak yükseklik hem de bunun genişliği genişletmek ve daha küçültmek mümkün olmalıdır.

Doğrusu ben önerilere açığım bundan daha tabloları ancak diğer kullanmayın edeceğiz. Şu anda jQuery DOM nesnelerini değiştirmek için sürükleyip bırakabileceğim satır içi satırları kullanıyorum. Etki, müşterinin tam olarak istediği şey değildir:

Answer 1

Aynı fikirde çok dinamik düzenler yaptım. Şamandıra davranışınızın bloktan bloğa nasıl bir sonraki blok için durduğunu daha fazla düşünmeniz gerekir, böylece istediğiniz gibi yeniden konumlandırılabilirler. Yani bir float-stop elemanı tanımlamak gereklidir. Sizin bloklar float:left belki float:right birlikte çalışacaktır. Bir noktada bu davranış bir yerde iyi sol tarafta sonraki bloğa sınır gereken tüm blokların Yapılan CSS

.floatstop { 
    clear: both; //the important code here.. 
    width: 100%; 
    height: 1px; 
    line-height: 1px; 
    margin-top:-1px; 
} 

ve Html

<div class="floatstop"></div> 

ile yapılır durdurmak zorunda anlamaya olacak (belki sağ tarafı çok) Eğer aksi takdirde daha önce bloğun altında aşağı yüzer ediyorum, çok bunun için borderspace çok doğru yerleştirilen blok için alana sahip bir taban düzenini tanımlamak zorunda.

Ama daha modern bir yolu var! Düzeninizi tanımlamak için CSS3 kodlarını kullanabilirsiniz.

.columnblock { 
    width: 100%; 
    column-gap: 30px; 
    // for symmetric columned layouts use.. 
    column-count: 3; 
    // or for not symmetric layouts use.. 
    column-width: 280px; 
} 

<div class="columnblock"> 
    <p>Lorem Ipsum</p> 
    <p>another Paragraph</p> 
</div> 

Orada başka şeyler burada söz ama eğer bir blok oluşturmak eğer yaklaşık http://www.w3schools.com/css3/css3_multiple_columns.asp