Html

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>

 


Etiketler
div display flex grid float relative 
İlgili Makaleler
Web Tabanlı Uygulama Geliştirme Dersi Birinci Dönem Birinci Yazılı Çalışma Soruları
TrendYol 2023 - 2024 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Web Sayfalarına Youtube Videolarını Ekleme
Input Html Etiketinin Pattern Özelliği
Cimbomun Yer Aldığı 2023 Uefa Şampiyonlar Ligi A Grubundaki Takımları Table Etiketiyle Gösterimi
Form Bloğu İçinde Kullanılan Button Etiketi ve Özellikleri
Form Bloğu İçinde Kullanılan fieldset ve legend Etiketleri
Form Bloğu İçinde Form ve Veri Giriş Özellikleri
Form Bloğu İçinde Kullanılan Input Etiketi ve Özellikleri
Form Bloğu İçinde Kullanılan TextArea Etiketi ve Özellikleri
2022 Katar Dünya Kupasında Belirlenen Grupları Table Etiketini Kullanarak Web Sayfasında Görüntüleme
Form Bloğu İçinde Kullanılan Seçim Listesi Etiketleri ve Özellikleri
Form Bloğu İçinde Kullanılan Meter Etiketi ve Özellikleri
Form Bloğu İçinde Kullanılan Progress Etiketi ve Özellikleri
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Puan Durumunu Div Etiketiyle Listeleyen Web Sayfası Uygulaması
Cimbomun Yer Aldığı 2023 Uefa Şampiyonlar Ligi A Grubundaki Takımların Div Etiketiyle Gösterimi
Web Sayfasında Form Kullanımı
2022 Katar Dünya Kupasında Belirlenen Grupları Liste Etiketini Kullanarak Web Sayfasında Görüntüleme
Form Elemanlarını Kullanarak Web Sayfasında Kayıt Formu Tasarımı
Birden Fazla Tanımlanan Div Etiketlerini Aynı Sütunda Gösterme İşlemi Nasıl Yapılır

Yorum Ekle
   
Kötü İyi