Css Float Konumlandırma
by admin,float hertürlü HTML elementi için ve çoklu kolon oluşturmak için kullanılır.Bu örnekde haber sitelerine gördüğümüz resim ve yazı mantığı hakkında bazı kodlar vermek istiyorum.
<html>
<head>
<title>float sayfa düzeni</title>
<style type=”text/css”>
#icerikAlani{
margin:10px;
}
#icerikAlani #resim{
float:left;
width:150px;
margin-left:5px;
margin-top:15px;
}
</style>
<body>
<div id=”icerikAlani”>
<div id=”resim”>
<img src=”bloo.jpg” width=”150″ height=”150″ alt=bloo />
</div>
<h1>Başlık</h1>
<p>UZUN İÇERİK - DSADSADSADSADSADSADASDSADSADASDSADSADASD
ASDASDASDSADAEDFASDASDSADASDEASSADSADSADS
DSADASDSADAAASADASDASDASDSADSADAS
SADSADASDSADSADSA
ASDASDASDSADAEDFASDASDSADASDEASSA
DSADASDSADAAASADASDASDASDSADSADA
SADSADASDSADSADSA
ASDASDASDSADAEDFASDASDSADASDEA
DSADASDSADAAASADASDASDASDSADSADASDASDASD
SADSADASDSADSADSA
ASDASDASDSADAEDFASDASDSADASDEASSADSADS
DSADASDSADAAASADASDASDASDSADSADASD
SADSADASDSADSADSA</p>
</div>
</body>
</html>
Aşağıdaki linkde çalışır görünüm mevcut.Burda içerikAlani içerisindeki resim divini sola dayadık böylece yazı çevresini sardı.
Tags: Css, Float, Float Konumlandırma
