Benim Soru(lar)

1. Bu yöntemlerin herhangi bir profesyonel web tasarımcısı tarafından tercih edilen?

2. Web sitesi çizimi, bu yöntemleri bir web tarayıcısı tarafından prefereed var mı?

3. Bu sadece kişisel bir tercih mi?

4. Kaçırdığım başka teknikler var mı?

Sorular çok sütunlu düzeni tasarımı konusunda Yukarıda . not:

şamandıra:sol;

http://jsfiddle.net/CDe6a/

Bu sütun düzenleri oluştururken her zaman kullanmak, ve sadece iyi iş gibi görünüyor yöntemi. Ana, yani clear:both; daha sonra hatırlamak zorunda olsa da kendi üzerine çökmesi. Başka birconbu yeni bulduğum metni dikey olarak hizalamak için yetersizlik oldu.

görüntülemek:satır içi;

Bu çöken ana sorunu doğru gibi görünüyor, ama boşluk ekler.

http://jsfiddle.net/CDe6a/1/

Html boşluk kaldırma kolay bu sorunu düzeltme gibi görünüyor, ama eğer html konusunda çok seçici değilseniz tercih edilmez.

http://jsfiddle.net/CDe6a/2/

ekran:ınline-block;

Tam olarak davranmaya görünüyor display:inline; gibi.

http://jsfiddle.net/CDe6a/3/

display:table-cell;

http://jsfiddle.net/CDe6a/4/

Mükemmel çalışıyor.

Düşüncelerim:

Eminim eksik bir ton malzeme, gibi bazı özel durumlar kıracak düzeni ama, display:table-cell; görünüyor için iyi çalışır, ve sanırım başlayacak değiştirme float:left; olarak hep görünmek pisliği clear:both;. Web üzerinde bu konu hakkında birçok makale ve bloglar okudum, ama hiçbiri benim web sitesi dışarı atarken kullanmak için ne yapmam gerektiği konusunda kesin bir cevap verin.

Seçenekler hakkında sorular:

• float:left;< / ^ br . Ek biçimlendirme kaydır onay için ihtiyacı nedeniyle yüzer sevmiyorum. İlgilendiğim kadarıyla, float tüm konsepti kötü CSS özellikleri tasarlanmıştır. Bu konuda yapabileceğimiz bir şey olsa. Ama önemli olan şey, çalışır durumda ve tüm tarayıcılarda çalışır (hatta IE6/7), Eğer istersen onu kullan.

Takas için ek biçimlendirme eğer yüzer temizlemek için :after seçici kullanıyorsanız, bu gerekli olmayabilir, ama bu eğer IE6 veya 7 için destek istiyorsanız bir seçenek değil.

• display:inline;< / ^ br . Bu display:inline; zoom:1 bulunduğu IE6/7, dışında, sonbahar-geri inline-block kırık desteğini kesmek düzeni için kullanılan, olmamalı.

• display:inline-block;< / ^ br . Bu benim en sevdiğim seçenek. İyi ve tutarlı bir şekilde tüm tarayıcılarda, bazı unsurlar için destek olan IE6/7 için bir uyarı ile çalışır. Ama bakın hacky çözüm bu sorunu gidermek için yukarıdaki.

Diğer büyük caveat inline-block çünkü içi boy, beyaz alanlar arasında unsurlardır tedavi aynı boşluk kelimeler arasında metin, alın boşlukları görünen unsurlar arasında. Bunun için alternatif çözüm vardır, ama bunların hiçbiri idealdir. (en basit öğeleri arasında boşluk var)

• display:table-cell;< / ^ br . Olacak başka bir tarayıcı uyumluluk sorunları var. Eski Ler ile bu iş hiç yürümez. Ama hatta diğer tarayıcılar, belirtmekte fayda table-cell tasarlanmış kullanılabilecek bir bağlam içinde elementler vardır tarz olarak table table-row; kullanarak table-cell tecrit değil tekniğine uygun şekilde yapmak, çok deneyim, farklı tarayıcılar tedavi farklı.

Kaçırmış olabilir diğer teknikler? Evet.

• Bu çok sütunlu bir düzen için böyle söylediğine göre, hakkında bilmek isteyebileceğiniz CSS Columns feature var. Ancak en iyi desteklenen bir özellik değil (hatta 9 ve satıcı bir önek diğer tüm tarayıcılar tarafından gerekli IE tarafından desteklenmez) kullanmak isteyebilirsiniz. Ama başka bir seçenek vardır, ve sorduğuna inanamıyorum.

• Ayrıca metin kutusu için kutusundan akan izin vermek için tasarlanmış CSS FlexBox özelliği var. Biraz karmaşık düzen sağlayacak heyecan verici bir özelliği, ama bu hala çok gelişme http://html5please.com/#flexbox bkz

Bu yardımcı olur umarım.