HTML Div Taglarını Yanyana Sıralamak

HTML ile çalışırken  Div kodları altalta sıralanır. Div taglarını yan  yana olmasını istediğinizde çeşitli çözümler aşağıda verilmiştir.







<style type="text/css">
.kolon { float:left; border:1px solid red; padding:10px; margin:10px; }
</style>
<div class="kolon">
DIV SATIRI</div>
<div class="kolon">
DIV SATIRI
</div>
<div class="kolon">
DIV SATIRI
</div>
<div style='clear: both'/>


<div id="birinciDiv" style="display:inline-block"> DIV SATIRI </div>
<div id="ikinciDiv" style="display:inline-block"> DIV SATIRI </div>


<div class="tasiyici">
<div id="birinci"> DIV SATIRI </div>
<div id="ikinci"> DIV SATIRI </div>
<div class="temizle"></div>
</div>


<style type="text/css"> #dis_bolme { width: 500px; height:250px; background-color: #666 } .ic_bolme{ float:left; width:150px; height:150px; border:#CCC solid 1px; background-color: #F00; margin-right: 10px; margin-left: 4px; </style>
<div id="dis_bolme">
<div class="ic_bolme">DIV SATIRI</div>
<div class="ic_bolme">DIV SATIRI</div>
 <div class="ic_bolme">DIV SATIRI</div>
 </div>





<style type="text/css">.kolon { float:left; border:1px solid red; padding:10px; margin:10px; }
</style>

<div class="kolon">
1 nolu div aralığı
</div>
<div class="kolon">
2 nolu div aralığı
</div>
<div class="kolon">
3 nolu div aralığı
</div>
<div style='clear: both'/>

0 yorum: