yüzer: left; vs display: satır içi; vs display: satır içi blok; ekran: tablo hücresi;

Sorularım)

1. Bu yöntemlerden herhangi biri profesyonel bir web tasarımcısı tarafından tercih ediliyor mu?

2. Web sitesini çizerken bu yöntemlerden herhangi biri bir web tarayıcısı tarafından tercih ediliyor mu?

3. Bunların hepsi kişisel tercih mi?

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

Not: Yukarıdaki sorular çok sütunlu bir düzen tasarlamakla ilgilidir

yüzer: left;

http://jsfiddle.net/CDe6a/

Bu, her zaman sütun düzenleri oluştururken kullandığım yöntemdir ve gayet iyi çalışıyor gibi görünüyor. Ebeveyn yine de kendi kendine çöküyor, bu yüzden clear:both;daha sonra hatırlamanız gerekiyor . Başka aleyhte yeni bulduğum dikey hizalama metne yetersizlik oldu.

görüntüler: inline;

Bu, çöken ebeveynin problemini düzeltiyor gibi görünüyor, ancak boşluk ekliyor.

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

Beyaz alanın html'den kaldırılması bu sorunu en kolay çözüm gibi görünüyor, ancak html'niz hakkında gerçekten seçici iseniz istenmez.

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

görüntüler: inline-block;

Sanki aynen öyle davranıyor display:inline;.

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

Görüntülenecek: Tablo-hücre;

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

Mükemmel çalışıyor.

Düşüncelerim:

Eminim, düzeni bozacak belirli istisnalar gibi bir ton şey eksikim, ancak display:table-cell;en iyi şekilde çalışıyor gibi görünüyor ve float:left;her zaman berbat gibi göründüğüm gibi değiştirmeye başlayacağımı düşünüyorum clear:both;. Web'de bununla ilgili birçok makale ve blog okudum, ancak hiçbiri web sitemi hazırlarken ne kullanmam gerektiği konusunda kesin bir cevap vermiyor.

Hakkında sorduğunuz seçeneklerden:

• float:left;
  Şamandırayı temizlemek için ek işaretleme ihtiyacından dolayı şamandıraları sevmiyorum. Benim düşünceme göre, tüm floatkonsept CSS özelliklerinde zayıf bir şekilde tasarlandı. Yine de bu konuda yapabileceğimiz hiçbir şey yok. Ama önemli olan, işe yaraması ve tüm tarayıcılarda (hatta IE6 / 7'de) çalışmasıdır, bu yüzden isterseniz kullanın.

Yüzenleri temizlemek için :afterseçiciyi kullanırsanız, temizleme için ek işaretleme gerekli olmayabilir , ancak IE6 veya IE7'yi desteklemek istiyorsanız bu bir seçenek değildir.

• display:inline;
  Bu display:inline; zoom:1, kırık destek için bir geri dönüş olan IE6 / 7 hariç, düzen için kullanılmamalıdır inline-block.

• display:inline-block;
  Bu benim en sevdiğim seçenektir. Bazı tarayıcılar için onu destekleyen IE6 / 7 için bir uyarı ile tüm tarayıcılarda iyi ve tutarlı bir şekilde çalışır. Ancak, bu soruna geçici bir çözüm bulmak için yukarıya bakın.

Diğer büyük uyarı inline-block, satır içi yönü nedeniyle, öğeler arasındaki beyaz boşlukların, metin sözcükleri arasındaki beyaz boşluklarla aynı şekilde işlem görmesi, böylece öğeler arasında boşluklar oluşmasıdır. Bunun için geçici çözümler var, ancak hiçbiri ideal değil. (en iyisi, elemanlar arasında boşluk olmamasıdır)

• display:table-cell;
  Tarayıcı uyumluluğu ile ilgili sorun yaşayacağınız bir diğeri. Eski IE'ler bununla hiç çalışmaz. Ancak diğer tarayıcılar için bile, ve table-cellolarak biçimlendirilmiş öğelerin içinde olma bağlamında kullanılmak üzere tasarlanmış olan kayda değerdir ; tek başına kullanmak bunu yapmanın amaçlanan yolu değildir, bu nedenle farklı tarayıcıları farklı şekilde ele alabilirsiniz.tabletable-rowtable-cell

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

• Bunun çok sütunlu bir yerleşim için olduğunu söylediğiniz için, bilmek isteyebileceğiniz bir CSS Sütunları özelliği vardır. Bununla birlikte, en iyi desteklenen özellik değildir (IE9'da bile IE tarafından desteklenmez ve diğer tüm tarayıcılar için gerekli bir satıcı öneki), bu nedenle kullanmak istemeyebilirsiniz. Ama bu başka bir seçenek ve siz istediniz.

• Ayrıca, kutudan kutuya metin akmasına izin vermeyi amaçlayan CSS FlexBox özelliği de vardır. Bazı karmaşık düzenlere izin verecek heyecan verici bir özelliktir, ancak bu hala geliştirme aşamasındadır - bkz. Http://html5please.com/#flexbox

Umarım yardımcı olur.

Genellikle kullanmak float: left;ve eklemek overflow: auto;için çöken ana sorunu çözmek (bu eserlerin neden olarak overflow: automüstehcen yükseklik verin yoksa kaydırma çubukları eklemek yerine üst genişleyecektir, overflow: hiddenhem de çalışır). Sahip olduğum dikey hizalama ihtiyaçlarının çoğu, menü çubuklarındaki tek satırlık metinler içindir ve bunlar line-heightözellik kullanılarak çözülebilir . Bir blok öğesini dikey olarak hizalamam gerekirse, üst öğe ve dikey olarak hizalanmış öğe, mutlak konum, ilk% 50 ve negatif kenar boşluğu üzerinde açık bir yükseklik ayarlardım.

Kullanmamamın nedeni display: table-cell, sitenin genişliğinin işleyebileceğinden daha fazla öğeniz olduğunda taşmasıdır. tablo hücresi kullanıcıyı yatay olarak kaydırmaya zorlarken, kayan öğeler taşma menüsünü sarar ve yatay kaydırma gerekmeden hala kullanılabilir hale getirir.

Şamandıra ile ilgili en iyi şey: sol ve taşma: otomatik, muhtemelen daha da fazla, kesmeksizin IE6'ya kadar geri dönmesidir.

Bunun için neye ihtiyacınız olduğuna bağlı olduğunu söyleyebilirim:

1. Sadece 3 sütun düzeni elde etmek için ihtiyacınız varsa, bunu yapmanızı öneririm float.

2. Menü için ihtiyacınız varsa kullanabilirsiniz inline-block. Boşluk sorunu için, burada http://css-tricks.com/fighting-the-space-between-inline-block-elements/ adresinde Chris Coyier tarafından açıklanan birkaç numara kullanabilirsiniz .

3. Genişliğin belirtilen bir kutuya eşit olarak yayılması gereken çoktan seçmeli bir seçenek yapmanız gerekiyorsa, tercih ederim display: table. Bu, bazı tarayıcılarda düzgün çalışmaz, bu nedenle tarayıcı desteğinize bağlıdır.

Son olarak, en iyi yöntem ne olabilir flexbox. Bunun özellikleri birkaç kez değişti, bu yüzden henüz kararlı değil. Ama bir kez sonuçlandırıldığında, bu benim en iyi yöntem olacak.

Satır içi bloğu tercih ederim, ancak şamandıra da yararlıdır. Tablo hücresi eski IE'ler tarafından doğru şekilde oluşturulmuyor (ikisi de satır içi engellemiyor, ancak zoom: 1; *display: inlinesık kullandığım kesmek var). Ebeveynlerinden daha küçük bir yüksekliğe sahip çocuklarınız varsa, şamandıralar onları en üste getirirken, satır içi blok bazen vidalanır.

Çoğu zaman, elbette IE olmadığı sürece tarayıcı her şeyi doğru bir şekilde yorumlayacaktır. IE'nin emmediğinden emin olmak için her zaman kontrol etmeniz gerekir - örneğin, tablo hücresi kavramı.

Tüm gerçeklikte, evet, kişisel tercihlere dayanır.

Beyaz boşluktan kurtulmak için kullanabileceğiniz tekniklerden biri font-size, ebeveyne bir 0 ayarlamak , sonra da font-sizebir güçlük ve iğrenç olmasına rağmen çocuklara geri vermek olacaktır .

Sadece kayıt için, Spudley'nin cevabına eklemek için position: absolute, sütun genişliklerini biliyorsanız, kullanma ve kenar boşlukları da olabilir.

Benim için, bir yöntemi seçerken ana sorun, tüm yüksekliği (eşit yükseklikler) doldurmak için sütunlara ihtiyacınız olup olmadığıdır, burada tablo hücresi en kolay yöntemdir (eski tarayıcılar için fazla umursamıyorsanız).

Tercih ediyorum inline-block, ancak floatözellikle HTML öğelerini bir araya getirmenin faydalı bir yolu, özellikle sola ve sağa yapışması gereken unsurlarımız olduğunda, daha az satır yazarak daha iyi çalışırken, satır içi blok diğer birçok durumda iyi çalışır .