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 Sayfalarına Youtube Videolarını Ekleme
2020 - 2021 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Jquery Uygulamalarında Ajax İsteği Yapılınca Oluşabilecek Hataları Yakalama
Input Html Etiketinin Pattern Özelliği
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Puan Durumunu Div Etiketiyle Listeleyen Web Sayfası Uygulaması
Birden Fazla Tanımlanan Div Etiketlerini Aynı Sütunda Gösterme İşlemi Nasıl Yapılır
Failed to load resource: the server responded with a status of favicon.ico 404 (Not Found) Hatasını Düzeltme
Terminal ve Sunucu Tabanlı Web Projeleri Arasındaki Farklar
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Maç Özetlerini Gösteren Web Sayfası Uygulaması
2022 Katar Dünya Kupasında Belirlenen Grupları Liste Etiketini Kullanarak Web Sayfasında Görüntüleme
2022 Katar Dünya Kupasında Belirlenen Grupları Table Etiketini Kullanarak Web Sayfasında Görüntüleme
Euro 2024 Avrupa Şampiyonası Eleme Gruplarını Table Etiketi Kullanarak Web Sayfasında Tasarlama
Web Sayfalarında Kullanılan Yerleşim Elemanları
Html5 Canvas Nedir, Canvas Nasıl Kullanılır, Canvas Elementiyle Neler Yapılabilir
Web Sayfasına Eklenen Resmi Gösterip Gizleyen Uygulamayı Javascript Kodlarıyla Gerçekleştirme
Visual Studio 2022 Programında Table Etiketini Kullanarak Hesap Makinesi Tasarımını Web Sayfasında Yapma
Jquery Ajax 200 OK JSON ParseError Hatasını Düzeltme
Web Sayfasında Tablo Etiketini Kullanarak Sözleşme Form Tasarımı Yapma
Web Sayfasında Tablo Stillendirme
Web Sayfasında Marquee Etiketiyle Resim Kaydırma İşlemleri

Yorum Ekle
   
Kötü İyi