Görüntüyü kullanmanın avantajları: inline-block vs float: CSS'de sol

Normalde, DIVsbir satırda birden fazla olmasını istediğimizde kullanırdık float: left, ama şimdidisplay:inline-block

Örnek bağlantı burada . Bana öyle geliyor ki bu arka arkaya display:inline-blockyapmanın daha iyi bir yolu align DIVs, ancak herhangi bir sakınca var mı? Bu yaklaşım neden floathileden daha az popüler ?

3 kelimeyle: inline-blockdaha iyidir.

Satır İçi Blok

display: inline-blockYaklaşımın tek dezavantajı , IE7'de ve altında bir öğenin yalnızca varsayılan inline-blockolarak zaten mevcutsa görüntülenebilmesidir inline. Bunun anlamı, bir <div>element kullanmak yerine bir element kullanmanız gerektiğidir <span>. Bu gerçekten çok büyük bir dezavantaj değil çünkü anlamsal olarak a <div>sayfayı bölmek içindir, a <span>ise sadece bir sayfayı kapsamak içindir, bu yüzden çok büyük bir anlamsal fark yoktur. Bir büyük faydası display:inline-blockdiğer geliştiricilerin daha sonraki bir noktada kodu muhafaza edildiğinde, çok daha neyi açıktır ki display:inline-blockve text-align:right bir daha gerçekleştirmek için çalışıyor float:leftya da float:rightbeyanı. Benim favori fayda inline-blockyaklaşımı kullanımı kolay olması vertical-align: middle, line-heightvetext-align: centeröğeleri sezgisel bir şekilde mükemmel bir şekilde ortalamak için. Mozilla blogunda , tarayıcılar arası satır içi bloğun nasıl uygulanacağına dair harika bir blog yazısı buldum . İşte tarayıcı uyumluluğu .

şamandıra

floatYöntemi kullanmanın sayfanızın mizanpajı için uygun olmamasının nedeni, floatCSS özelliğinin başlangıçta yalnızca bir görüntünün etrafına metin sarması (dergi stili) için tasarlanmış olması ve tasarım gereği genel sayfa düzeni amaçlarına en uygun olmamasıdır. Yüzen öğeleri daha sonra değiştirirken , sayfa akışında olmadıkları için bazen konumlandırma sorunları yaşarsınız . Diğer bir dezavantajı, genellikle bir açık düzeltme gerektirmesidir, aksi takdirde sayfanın yönlerini bozabilir. Düzeltme, üst öğelerin etraflarında daraltılmasını önlemek için yüzen öğelerin arkasına bir öğe eklenmesini gerektirir ; bu, stili içerikten ayırma arasındaki anlamsal çizgiyi aşar ve bu nedenle web geliştirmede bir anti-model olur .

Yukarıdaki bağlantıda bahsedilen beyaz boşluk sorunları, white-spaceCSS özelliği ile kolayca düzeltilebilir .

Düzenle:

SitePoint , web tasarım tavsiyeleri için çok güvenilir bir kaynak ve benimle aynı görüşe sahip görünüyorlar:

CSS mizanpajlarında yeniyseniz, CSS'nin yaratıcı şekillerde yüzer kullanmanın becerinin yüksekliği olduğunu düşündüğünüz için affedilirsiniz. Bulabildiğiniz kadar CSS mizanpajı öğreticisi kullandıysanız, kayan noktalara hakim olmanın bir geçit töreni olduğunu düşünebilirsiniz. Yaratıcılık karşısında gözlerinizi kamaştıracak, karmaşıklık karşısında şaşkına döneceksiniz ve sonunda floatların nasıl çalıştığını anladığınızda bir başarı duygusu kazanacaksınız.

Kanmayın. Beynin yıkanıyor.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015 Güncellemesi - Flexbox, modern tarayıcılar için iyi bir alternatiftir :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Daha fazla bilgi

21 Aralık 2016 Güncellemesi

Bootstrap 4, IE9 desteğini kaldırıyor ve böylece satırlardaki kayan sayılardan kurtuluyor ve tam Flexbox'a geçiyor.

Çekme isteği # 21389

Genel inline-blockolarak daha iyi olduğunu kabul etsem de, duyarlı bir ızgara oluşturmak için yüzde genişliklerini kullanıyorsanız (veya piksel açısından mükemmel genişlikler istiyorsanız) hesaba katmanız gereken fazladan bir şey var :

inline-blockToplam% 100 veya% 100'e yakın genişliğe sahip ızgaralar için kullanıyorsanız , HTML işaretlemenizin sütunlar arasında beyaz boşluk içermediğinden emin olmanız gerekir .

Float'lar söz konusu olduğunda, bu endişelenmeniz gereken bir şey değildir - sütunlar herhangi bir boşluk veya sütunlar arasındaki diğer içeriklerin üzerinde yüzer. Bu sorunun yanıtlarında, kodunuzu çirkinleştirmeden HTML boşluklarını kaldırmanın yolları hakkında bazı iyi ipuçları vardır .

Herhangi bir nedenle HTML biçimlendirmesini kontrol edemezseniz (örneğin, kısıtlayıcı bir CMS), burada açıklanan hileleri deneyebilirsiniz veya satır içi blok yerine kayan sayılardan ödün vermeniz ve kullanmanız gerekebilir. Ayrıca font-size:0;, sütun kabında olduğu gibi yalnızca aşırı durumlarda kullanılması gereken çirkin CSS hileleri de vardır, ardından her sütunda yazı tipi boyutunu yeniden uygulayın .

Örneğin:

• İşte% 33,3 genişliğinde 3 sütunlu bir ızgarafloat: left . "Sadece çalışır" (ancak temizlenmesi gereken paket için).
• İşte tam olarak aynı ızgarainline-block . Bloklar arasındaki boşluk, toplam genişliği% 100'ün ötesine iten, düzeni bozan ve son sütunun bir satır aşağı düşmesine neden olan sabit genişlikte bir boşluk oluşturur.
• Burada inline-block, HTML’deki sütunlar arasında boşluk olmayan ve boşluksuz aynı ızgara görülmektedir . Tekrar "sadece çalışır" - ancak HTML daha çirkin ve CMS'niz, HTML çıktısına bir tür güzelleştirme veya girinti yapmaya zorlayarak bunu gerçekte başarmayı zorlaştırabilir.

divPiksel ile doğru hizalamak istiyorsanız , float kullanın. inline-blockher zaman birkaç pikseli kesmenizi gerektiriyor gibi görünüyor (en azından IE'de)

Cevabı burada derinlemesine bulabilirsiniz .

Ancak genel floatolarak, çevreleyen unsurların farkında olmanız ve bunlara dikkat etmeniz ve unsurları inline-blockbasit bir şekilde sıralamanız gerekir.

Teşekkürler

Satıriçi blokla ilgili basit olmayan bir özellik vardır. Yani CSS'de dikey hizalama için varsayılan değer temel değerdir. Bu, bazı beklenmedik hizalama davranışlarına neden olabilir. Bu makaleye bakın.

http://www.brunildo.org/test/inline-block.html

Bunun yerine, bir float: left yaptığınızda, div'ler birbirinden bağımsızdır ve kenar boşluğunu kullanarak bunları kolayca hizalayabilirsiniz.