Çözüldü Flex ile resimler yan yana gelmiyor

ErrorCorrection · 14 Mart 2023

İkişer olarak coloumn yapmak istiyorum. Neredeyse yarım saattir uğraşıyorum ama yapamadım. Yardım ederseniz çok sevinirim.
@bonz

HTML:

<section class="gallery">
 <div class="coloumn">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 <div class="coloumn">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 <div class="coloumn">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 <div class="coloumn">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 </section>

CSS:

.gallery{
 display: flex;
 flex-wrap:wrap;
 padding: 0 1rem;
}.gallery .column{
 flex: 25%;
}

Beroski · 15 Mart 2023

"coloumn" sınıfı kodu hatalı ve flex %50 yapın.

Kod:

<section class="gallery">
  <div class="column">
    <img src="room1.jpg" alt="">
    <img src="room2.jpg" alt="">
  </div>
  <div class="column">
    <img src="room1.jpg" alt="">
    <img src="room2.jpg" alt="">
  </div>
  <div class="column">
    <img src="room1.jpg" alt="">
    <img src="room2.jpg" alt="">
  </div>
  <div class="column">
    <img src="room1.jpg" alt="">
    <img src="room2.jpg" alt="">
  </div>
</section>

Kod:

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
}

.column {
  flex: 50%;
}

ErrorCorrection · 15 Mart 2023

Beroski dedi:

"Coloumn" sınıfı kodu hatalı ve Flex %50 yapın.

Kod:

<section class="gallery">
 <div class="column">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 <div class="column">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 <div class="column">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
 <div class="column">
 <img src="room1.jpg" alt="">
 <img src="room2.jpg" alt="">
 </div>
</section>

Kod:

.gallery {
 display: flex;
 flex-wrap: wrap;
 padding: 0 1rem;
}

.column {
 flex: 50%;
}

Hocam değişsen bir şey olmadı maalesef.

Beroski · 15 Mart 2023

ErrorCorrection dedi:
Hocam değişsen bir şey olmadı maalesef.

Özür dilerim hocam CSS koduna border eklememişim.

Kod:

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 0 0.5rem;
}

Not: Padding kısmı değişken olabilir.

ErrorCorrection · 15 Mart 2023

Beroski dedi:
Özür dilerim hocam CSS koduna border eklememişim.

Kod:

.gallery { display: flex; flex-wrap: wrap; padding: 0 1rem; } .column { flex-basis: 50%; box-sizing: border-box; padding: 0 0.5rem; }

Not: Padding kısmı değişken olabilir.

Teşekkürler hocam olud

Çözüldü Flex ile resimler yan yana gelmiyor

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

Beroski

Beroski

Hectopat

ErrorCorrection

Hectopat

Beroski

Hectopat

ErrorCorrection

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz