Avantajı kullanarak ekran:ınline-block vs şamandıra:sol CSS
Birden fazla DIVs
bir satırda olmasını istiyoruz normal şartlar altında,, float: left
, kullanırdık ama şimdi display:inline-block
hile keşfettim
Örnek herelink.
display:inline-block
4* DIVs
*Bir satır için iyi bir yoldur, ama orada herhangi bir dezavantajı var gibi geliyor bana? Neden bu yaklaşımı float
hile sonra daha az popüler?
CEVAP
3 Kelime: inline-block
daha iyidir.
Inline Blok
display: inline-block
yaklaşımın tek dezavantajı IE 7 ve altında bir öğe yalnızca zaten varsayılan olarak inline
olsaydı inline-block
görüntülenebilir. Bu ne demek <div>
bir eleman kullanmak yerine <span>
bir eleman kullanmak zorunda. Bu gerçekten çok büyük bir dezavantajı hiç çünkü anlamsal bir <div>
için bölünme sayfası yaparken <span>
sadece kapsayan bir zaman dilimi, bir sayfa, bu yüzden orada değil çok büyük bir anlam farkı var. Bir büyük yarar display:inline-block
o zaman diğer geliştiriciler korumak kodunuzu bir sonraki nokta, daha açık ne display:inline-block
text-align:right
etmeye başarmak daha bir float:left
float:right
deyim. inline-block
yaklaşımın en sevdiğim yarar kolay vertical-align: middle
, line-height
text-align: center
mükemmel elemanları, sezgisel bir şekilde merkezi için kullanılacak olmasıdır. Çapraz tarayıcı içi-blok, Mozilla blog üzerinde nasıl uygulanacağı konusunda büyük bir blog yazısı buldum. Burada browser compatibility.
Yüzer
Nedeni, kullanma float
yöntem değildir uygunu düzeni sayfanızı çünkü float
CSS özelliği was originally intended only to have text wrap around an image (magazine style) ve, tasarım, en uygun için genel sayfa düzeni amaçlar. Değişen öğeler daha sonra yüzerken, bazen 31 ** çünkü konumlandırma sorunları olacaktır. Başka bir dezavantajı, genellikle sayfanın yönleri kırılabilir bir clearfix aksini gerektirmesidir. Bu clearfix unsurları süzülüyor sonra bir eleman ekleme içerikten ayıran stil arasındaki anlamsal çizgisi ve böylece an anti-pattern in web development parent from collapsing onların etrafında durdurmak için gerektirir.
Herhangi bir beyaz boşluk sorunları bağlantısını yukarıda belirtilen kolayca white-space
CSS özelliği ile sabit olabilir.
Düzenleme:
SitePoint web tasarım tavsiye için çok güvenilir bir kaynak olduğunu ve seninle aynı görüş var gibi görünüyor:
Eğer CSS düzenleri için yeni iseniz, düşünmek için affetmiş olurdum CSS yaratıcı şekillerde kullanarak yüzer beceri yüksekliğidir. Eğer olabilir bulmak, mümkün olduğunca çok sayıda CSS düzeni öğreticiler tüketilen var yüzer ustalaşmak geçit bir ayin olduğunu varsayalım. Gözlerin kamaşacak. marifet, karmaşıklığı umut, ve bir anlamda elde edersiniz sonunda yüzer nasıl anlamak başarı.
Aldanmayın. Senin beynin yıkanmış.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
şamandıra:sol; vs görüntüleme:satır iç...
7 ekran anlamıyor: ınline-block...
Inline-block çalışmıyor IE8 ekran...
HTML5/Canvas kullanarak ekran görüntül...
Nasıl ınline-block öğeleri arasındaki ...