Ana içeriğe atla

HTML Div Etiketlerini Yanyana Konumlandırmak


Div Tag'ları Yanyana Nasıl Yerleştirilir?

HTML de span ve div etiketleri, benzersiz bir sınıflandırma gerektiğinde bölümleri tanımlamak için kullanılan öğelerdir. HTML ile çalışırken Div kodları varsayılan olarak altalta sıralanır. Div tag'larını yan yana olmasını istediğinizde çeşitli çözümler aşağıda verilmiştir.
Yöntem I :

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


Yöntem II :

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


Yöntem III :

<div class="bolme">
<div id="birinciDiv"> DIV SATIRI </div>
<div id="ikinciDiv"> DIV SATIRI </div>
<div class="temizle"></div>
</div>


Yöntem IV :

<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: 5px; 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>


Yöntem V :

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

<div class="bolme">
DIV SATIRI
</div>
<div class="kolon">
DIV SATIRI
</div>
<div class="kolon">
DIV SATIRI
</div>
<div style='clear: both'/>


Yukarıda gösterdiğimiz yöntemlerin dışında bir çok metot ile DIV etiketlerini yan yana sıralayabilirsiniz. Umarız faydası olmuştur. Zaman ayırdığınız için teşekkür ederiz. https://www.webkenti.net/

Yorumlar