Bu yazıda, bahsedilen yaklaşımların her birini tek tek tartışacağız ve her bir yönteme uygun bir örnek vereceğiz.
Öyleyse başlayalım!
Yöntem 1: İki Div'i Izgarayı Kullanarak CSS'de Yan Yana Yerleştirin
CSS'yi ' Kafes ” düzeni, kullanıcının iki veya daha fazla iki div'i yan yana yerleştirmesine izin verir. Temel olarak ızgara, satır ve sütunlardan oluşan bir düzen oluşturmak için kullanılan display özelliğinin bir değeridir.
Sözdizimi
Izgara düzenine sahip display özelliğinin sözdizimi aşağıda verilmiştir:
ekran: ızgara
Şimdi ızgara düzenini kullanarak iki div'i CSS'de yan yana yerleştirmeyle ilgili bir örneği inceleyelim.
Örnek
Burada, ana div'in içinde sınıf isimleri “olarak” olan iki çocuk div oluşturacağız. ebeveyn ”, “ çocuk ' ve ' çocuk ”:
< div sınıf = 'ebeveyn' >< div sınıf = 'çocuk' >< / div >
< div sınıf = 'çocuk' >< / div >
< / div >
CSS bölümünde sonraki, ' .ebeveyn ” üst div'e erişmek ve display özelliğinin değerini “ olarak ayarlamak için Kafes ”. Ardından, “ kullanarak kesri ayarlayın. ızgara-şablon-sütunları ” özelliği, sütunlar için alan oluşturmak için. Bizim durumumuzda, kesirleri “ olarak ayarlayacağız. 1 saat ' ve ' 1 saat ”, bu, her iki div'in de eşit alan elde ettiği anlamına gelir. Ayrıca, column-gap özelliğini kullanarak iki sütun arasındaki boşluğu ayarlayacağız ve değerini “ olarak ayarlayacağız. 25 piksel ”.
CSS:
.ebeveyn {Görüntüle : Kafes ;
ızgara-şablon-sütunları : 1 saat 1 saat ;
sütun boşluğu : 25 piksel ;
}
Bir sonraki adımda, ' .çocuk ” hem alt div'e erişmek hem de div'lerin yüksekliğini “ olarak ayarlamak için 250 piksel ” ve arka plan rengini “ olarak ayarlayın. rgb(253, 5, 109) ”:
.çocuk {yükseklik : 250 piksel ;
arka fon : rgb ( 253 , 5 , 109 ) ;
}
Bu, aşağıdaki sonucu gösterecektir:
Div'i yan yana yerleştirmek için başka bir yönteme geçelim
Yöntem 2: Flex Kullanarak İki Div'i CSS'de Yan Yana Yerleştirin
“ esnek ”, iki div'in yan yana yerleştirilmesine izin veren display özelliğinin değeridir. Bu özellik, esnek öğe için esnek bir uzunluk ayarlamak için kullanılır. Esnek öğeyi kabına sığacak şekilde küçültür veya büyütür.
Sözdizimi
flex ile display özelliğinin sözdizimi aşağıda verilmiştir:
ekran: esnek;Belirtilen kavramı anlamak için örneğe geçelim.
Örnek
Aynı HTML dosyasını ele alacağız ve “ esnek ” ana kapsayıcıya. Burada display özelliğinin değerini flex olarak ayarlayacağız ve alt div'ler arasındaki boşluğu “olarak ayarlayacağız. 10 piksel ”:
.ebeveyn {Görüntüle : esnek ;
açıklık : 10 piksel ;
}
Bundan sonra, div'in genişliğini, yüksekliğini ve arka plan rengini “olarak ayarlayın. 650 piksel ”, “ 200 piksel ', ve 'rgb(0, 255, 42) ', sırasıyla:
.çocuk {Genişlik : 650 piksel ;
yükseklik : 200 piksel ;
arka fon : rgb ( 0 , 255 , 42 ) ;
}
Verilen kodun sonucu aşağıda verilmiştir:
Yöntem 3: İki Div'i CSS'de Float Kullanarak Yan Yana Yerleştirin
CSS float özelliği, bir elemanın kayan yönünü belirtir. Daha spesifik olarak, bu özellik, iki div'i CSS'de yan yana yerleştirmek için kullanılabilir.
Sözdizimi
Float özelliğinin sözdizimi şöyledir:
kayan nokta: yok|sol|sağYukarıda verilen değerlerin açıklaması aşağıdadır:
- Yok: Yüzmeyi kısıtlamak için kullanılır.
- ayrıldı: Elemanları sol tarafta yüzdürmek için kullanılır.
- Sağ: Elemanları sağ tarafta yüzdürmek için kullanılır.
Div'i yan yana yerleştirme örneğine geçelim.
Örnek
Şimdi,
etiketinin içinde iki div oluşturacağız ve sınıf adını “ olarak atayacağız. bölüm1 ' ve ' div2 ”: < gövde >< div sınıf = 'div1' >< / div >
< div sınıf = 'böl2' >< / div >
< / gövde >
Sonra kullan ' .div1 ' ve ' .div2 ” HTML bölümüne eklenen kapsayıcılara erişmek için. Her iki div'i de aynı sınıfta kullanacağız çünkü her ikisine de atayacağımız özellikler ve değerler aynı.
Ardından, float özelliğinin değerini “ olarak atadık. ayrıldı ” ve div'in genişliğini ve yüksekliğini “ olarak ayarlayın. elli% ' ve ' %40 ”. Ayrıca box-sizing özelliğini kullanıyoruz ve değerini “ olarak ayarlıyoruz. kenarlık kutusu ”. Ayrıca, div'in arka plan rengini “ olarak ayarlayın. rgb(7, 255, 222) ” ve border özelliğinin değerlerini “ olarak ayarlayın. 3 piksel ”, “ sağlam ', ve ' rgb(255, 0, 255) ”:
.div1 , .div2 {batmadan yüzmek : ayrıldı ;
Genişlik : elli% ;
yükseklik : %40 ;
kutu boyutu : kenarlık kutusu ;
arka fon : rgb ( 7 , 255 , 222 ) ;
sınır : 3 piksel sağlam rgb ( 255 , 0 , 255 ) ;
}
Not: Div'lerin farklı arka plan renklerini ayarlayarak box-sizing özelliğini ve border özelliğini kullanmadan iki div'i yan yana yerleştirebilirsiniz.
Yukarıdaki kodu uyguladığınızda, HTML dosyasını çalıştırır ve sonucu görürsünüz:
Not: İki div arasında bir boşluk oluşturmak için önce başka bir div oluşturun ve ardından div'in kenar boşluğunu buna göre ayarlayın.
Çözüm
Div'ler, üç farklı CSS yöntemi kullanılarak yan yana yerleştirilebilir, bunlar “ esnek ' ve ' Kafes display özelliğinin ” değerleri ve “ batmadan yüzmek ' Emlak. Yöntemlerin her biri verimli bir şekilde çalışır; ancak, gereksinimlerimize göre bunlardan herhangi birini kullanabilirsiniz. Bu kılavuzda, CSS kullanarak div'i yan yana yerleştirmenin üç yöntemini tartıştık ve ilgili örnekler sağladık.