Birden Fazla Tanımlanan Div Etiketlerini Aynı Sütunda Gösterme İşlemi Nasıl Yapılır

Div etiketleri web sayfalarının kullanılan en önemli etiketleridir. Bu etiketler yardımıyla web sayfanızda özgürce işlemler yapabilirsiniz. Bu uygulamamızda birden fazla div etiketinin aynı sütunda nasıl gösterildiğini incelemeye çalışacağız. Div etiketleri blok düzeyinde elemanlar olduğu için satır bazlı çalışırlar. Web projesinde 3 adet div etiketi tanımlayalım.

    <div>
        Div 1
    </div>
    <div>
        Div 2
    </div>
    <div>
        Div 3
    </div>

Uygulamayı çalıştırdığımızda etiketlerin alt alta geldiğini görürsünüz. Halbuki biz bunları sütun bazlı göstermek istiyoruz. Bunu yapmanın birden fazla yöntemi vardır.

display özelliğine ait olan inline-blok seçeneğini kullanarak div etiketlerini sütun bazlı gösterebilirsiniz.

    <div style="display:inline-block">
        Div 1
    </div>
    <div style="display:inline-block">
        Div 2
    </div>
    <div style="display:inline-block">
        Div 3
    </div>

float ve overflow özelliklerini kullanarak div etiketlerini aynı satırda gösterebilirsiniz.

    <div style="float: left">Div 1</div>
    <div style="float: right">Div 3</div>
    <div style="float: none;overflow: hidden">Div 2</div>

display özeliğine ait olan flex seçeneğini kullanabilirsiniz.

    <div style="display:flex;justify-content:center">
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
    </div>

display özelliğine ait olan table-cell seçeneğini kullanabilirsiniz.

    <div style="display:table">
        <div style="display:table-cell">Div 1</div>
        <div style="display:table-cell">Div 2</div>
        <div style="display:table-cell">Div 3</div>
    </div>

display özeliiğine ait olan grid seçeneğini kullanabilirsiniz.

    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
    </div>

Ya da Bootstrap kütüphanesini kullanarak grid özelliklerinden yararlanabilirsiniz. Bunu gerçekleştirmek için proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Buradan Manage Nuget Packages komutunu çalıştıralım. Browse sekmesine tıklayalım. Search kısmına bootstrap yazalım. En son versiyonu projemize dahil edelim. head etiketi arasına aşağıdaki satırı ekleyelim.

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

Daha sonra aşağıdaki satırları oluşturalım.

    <div class="row">
        <div class="col">Div 1</div>
        <div class="col">Div 2</div>
        <div class="col">Div 3</div>
    </div>