Ders 13: Yüzer elemanlar (yüzenler)

Bir eleman özelliğini kullanarak sağa veya sola yanaşık olabilir şamandıra . Yani demek ki sağa veya bir belge (veya içeren kutu) (bkz: sol içeriği ya yüzer ile kutusunu dersi 9 Kutu modeli açıklaması için). Aşağıdaki resimde prensibi gösterilmektedir:

Biz örneğin bir resim etrafında bir metin sarma sahip istiyorsanız, sonuç böyle olacaktır:

Bu nasıl yapılır?

Yukarıdaki örnek için HTML kodu aşağıdaki gibi:

	  	<div id="picture">  		<img src="bill.jpg" alt="Bill Gates">  	</ Div>    	<p> causas Naturales et antecedentes,   	idciro etiam nostrarum voluntatum ... </ p>  	  	

Resmin sol ve onu çevreleyen metne yüzen almak için, sadece resmi çevreler ve bundan sonra özelliğini ayarlamak kutusunun genişliğini tanımlamak zorunda şamandıra sola:

	  	# Resim {  		float: left;  		width: 100px;  	}  	  	

Başka bir örnek: sütunlar

Yüzer ayrıca bir belgede sütun için de kullanılabilir. Sütunlar oluşturmak için, basitçe HTML kodu istediğiniz sütunları yapılandırmak zorunda <div> şöyle:

	  	<div id="column1">  		<p> Haec disserens qua de yeniden agatur  		et içinde quo causa consistat olmayan videt ... </ p>  	</ Div>    	<div id="column2">  		<p> causas Naturales et antecedentes,   		idciro etiam nostrarum voluntatum ... </ p>  	</ Div>    	<div id="column3">  		nostra <p> nam nihil Esset   		potestate si res ita se haberet ... </ p>  	</ Div>  	  	

Şimdi sütunların istenen genişliği% 33 gibi, ve sonra sadece özelliğini tanımlayarak sola her sütun şamandıra ayarlanırşamandıra :

	  	# Column1 {  		float: left;  		width: 33%;  	}    	# Column2 {  		float: left;  		width: 33%;  	}    	# Sütun3 {  		float: left;  		width: 33%;  	}  	  	

şamandıra ya olarak ayarlanabilir sol , sağ ya da hiçbiri .

Net özelliği

Net özelliği bir belgede yüzen elemanlarının sonraki unsurları davranacağım nasıl kontrol etmek için kullanılır.

Varsayılan olarak, sonraki elemanları bir kutu bir tarafa yayılmıştı zaman serbest kalacaktır kullanılabilir alanı dolduracak kadar taşınır. Metin neyin Yukarıdaki örnekte bak otomatik Bill Gates resmi yanına taşınır.

Özelliği açık değerleri kabul edilebilir sol , sağ , hem veya hiçbiri . Eğer ilkedir açık , örneğin, bir kutu için hem ayarlanır, bu kutunun üst kenar boşluğu sınır, her zaman yukarıda gelen olası yüzen kutuları için alt sınır marjı altında olacak.

	  	<div id="picture">  		<img src="bill.jpg" alt="Bill Gates">  	</ Div>    	<h1> Bill Gates </ h1>    	<P class = "floatstop" > causas Naturales et antecedentes,  	idciro etiam nostrarum voluntatum ... </ p>  	  	

Resim yanında dalgalanıyor gelen metin önlemek için, bizim için CSS aşağıdaki ekleyebilirsiniz:

	  	# Resim {  		float: left;  		width: 100px;  	}    	. Floatstop {  		clear: both;  	}  	  	

Özet

Yüzer birçok durumda yararlı olan ve genellikle konumlandırılması ile birlikte kullanılır. In sonraki derste biz göreli veya mutlak ya bir kutu, konumlandırmak için nasıl daha yakından bakacağız.