Çözüldü HTML/CSS - kutular yan yana koyulmuyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
I

Iskenderun

Kilopat
Katılım
1 Aralık 2020
Mesajlar
8.102
Makaleler
1
Çözümler
62
Yer
Iskenderun
HTML/CSS ile web site kodluyorum.
Görsellere eklediğim resimde: Alttaki 3 resmi ortaya almak istiyorum ve mobil uyumunu ise ekran küçüldükçe aşağı doğru sıralanmasını istiyorum. Bunu nasıl yapabilirim?

Kod: 
 <div class="row">
<div class="col-sm col-md col-lg col-xl col-xxl">
<div class="hizmetkutu">
ss.
</div>

<div class="hizmetkutu">
ss.
</div>
<div class="hizmetkutu">
ss.
</div>
</div>
</div>

Kod: 
.hizmetkutu {
width: 25%;
height: 85%;
border: 2px solid red;
margin-top: 150px;
border-radius: 15px;
float: left;
color: white;
}

Yukarı kodları kullandım hiçbir şekilde yapamadım. Yardımcı olursanız sevinirim.
 

Dosya Ekleri

  • Ekran Alıntısı.PNG
    Ekran Alıntısı.PNG
    13,4 KB · Görüntüleme: 330
Son düzenleyen: Moderatör:
Tarihe göre sırala Puana göre sırala
Silinen üye dedi:
HTML/CSS ile web site kodluyorum.
Görsellere eklediğim resimde: Alttaki 3 resmi ortaya almak istiyorum ve mobil uyumunu ise ekran küçüldükçe aşağı doğru sıralanmasını istiyorum. Bunu nasıl yapabilirim?

Kod: 
 <div class="row">
<div class="col-sm col-md col-lg col-xl col-xxl">
<div class="hizmetkutu">
ss.
</div>

<div class="hizmetkutu">
ss.
</div>
<div class="hizmetkutu">
ss.
</div>
</div>
</div>

Kod: 
.hizmetkutu {
width: 25%;
height: 85%;
border: 2px solid red;
margin-top: 150px;
border-radius: 15px;
float: left;
color: white;
}

Yukarı kodları kullandım hiçbir şekilde yapamadım. Yardımcı olursanız sevinirim.
Genişletmek için tıkla...

CSS: 
display:flex;

Deneyin.
 
Artı 0 Eksi
Bootstrap kullanıyorsanız aşağıya kodları bırakıyorum.

HTML: 
<div class="hizmetkutu container">
    <div class="row">
        <div class= "kutular col-md-4">lorem</div>
        <div class= "kutular col-md-4">lorem</div>
        <div class= "kutular col-md-4">lorem</div>
    </div>
</div>

CSS: 
.hizmetkutu {
    margin-top: 150px;
    float:left;
}

.kutular {
    border: 2px solid red;
    border-radius: 15px;
    color: black;
}

Canlı olarak kodları görüp test etmek için link

Eğer kutuların içindeki yüksekliği değiştirmek istiyorsanız da kutular sınıfına padding eklemeniz yeterli olacaktır.
 
Artı 0 Eksi
Antares dedi:
@Berkay Davas Hocam "box-sizing:border-box;" ile "position: relative;" ne işe yarıyor, kısaca yazabilir misiniz?
Genişletmek için tıkla...
box-sizing:border-box;: Elemana padding veya border verdiğinde genişliğine ve yüksekliğine dahil ediyor. Yani 2px border olsun ve yüksekliği 50px olsun. İçerik yüksekliği otomatik olarak 46px oluyor.

position: relative;: Elemanı göreceli olarak konumlandırır. Konumunu top, bottom, right ve left ile değiştirebilirsin. Aynı zaman relative konumlandırılmış bir elemanın içinden absolute konumlandırılmış bir eleman çıkamaz.
 
Artı 0 Eksi
Berkay Davas dedi:
box-sizing:border-box;: Elemana padding veya border verdiğinde genişliğine ve yüksekliğine dahil ediyor. Yani 2px border olsun ve yüksekliği 50px olsun. İçerik yüksekliği otomatik olarak 46px oluyor.

position: relative;: Elemanı göreceli olarak konumlandırır. Konumunu top, bottom, right ve left ile değiştirebilirsin. Aynı zaman relative konumlandırılmış bir elemanın içinden absolute konumlandırılmış bir eleman çıkamaz.
Genişletmek için tıkla...
Sağolun hocam son olarak bu kod ne işe yarıyor bilginiz var mı?
 
Artı 0 Eksi

Benzer konular

BerkeSZ
CSS ile iki obje nasıl yan yana getirilir?
Mesaj
3
Görüntüleme
264
delikarga
delikarga
burakucar123
CSS İki Div'i Yan Yana Ortalayarak Sıralama
Mesaj
6
Görüntüleme
8B
burakucar123
burakucar123
FlyingBeaver
  • Soru
HTML iki formu yan yana gösterme
Mesaj
3
Görüntüleme
8B
dincer degre
dincer degre
AteşliKazanova99
  • Çözüldü
Çözüldü  CSS Sütün sol üst tarafa koyulmuyor
2 3
Mesaj
27
Görüntüleme
1B
William Crusader
William Crusader
NITRO
  • Soru
Udemy HTML + CSS alınır mı?
2
Mesaj
18
Görüntüleme
3B
ihydrogeni
ihydrogeni

Yeni konular

Yeni mesajlar

Geri
Yukarı