v2.5.2
Giriş yap

Css'de resimleri yanyana getirip dağıtamadım

yazilimyolcusu
2,171 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhaba arkadaşlar. Aşağıdaki kodlarla resimler arasında "margin-left" veremedim. Resimleri yanyana "display:flex" ile de getiremedim. "justify-content:space-around" ile resimleri dağıtamadım. Aşağıya resmini de koyuyorum.
https://www.hizliresim.com/55x181k

index.php

<div class="sporcuurunleri-sayfasi-div">

<div class="sporcuurunleri-marginleft-div">

<div class="sporcuurunleri-sayfasi-resim">
<img src="images/urunresimleri/<?php echo $sporcu["sporcuurunleri_resim"]; ?>">
</div>

<div class="sporcuurunleri-sayfasi-urunadi"><?php echo $sporcu['sporcuurunleri_urunadi']; ?>
</div>

<div class="sporcuurunleri-sayfasi-stokkodu"><?php echo $sporcu['sporcuurunleri_stokkodu']; ?>
</div>

<div class="sporcuurunleri-sayfasi-fiyati"><?php echo $sporcu['sporcuurunleri_urunfiyati']." TL"; ?>
</div>

<div class="sepeteekle-butonu"><button>Sepete Ekle</button></div>

</div>

</div>

style.css

.p0 {padding:0px;}

.sporcuurunleri-sayfasi-div {
display: flex;
background:red;
}

.sporcuurunleri-marginleft-div {
margin-left:50px;
background:yellow;
}

.sporcuurunleri-marginleft-div:first-child {
margin-left:0px;
background:yellow;
}

.sporcuurunleri-sayfasi-resim {
width:265px;
height:auto;
}

.sporcuurunleri-sayfasi-resim img {
width:100%;
height:265px;
border:1px solid black;
}

.sporcuurunleri-sayfasi-urunadi {
width:100%;
height:28px;
border:1px solid black;
text-align:center;
background:#fff;
font-size:18px;
margin-top:2px;
}

.sporcuurunleri-sayfasi-stokkodu {
width:100%;
height:28px;
border:1px solid black;
text-align:center;
background:#fff;
font-size:18px;
margin-top:2px;
}

.sporcuurunleri-sayfasi-fiyati {
width:100%;
height:28px;
border:1px solid black;
text-align:center;
background:#fff;
font-size:18px;
margin-top:2px;
}

.sepeteekle-butonu button {
width:100%;
height:35px;
line-height:35px;
border:none;
outline:0;
padding:0px 5px;
color:white;
background:#60a3bc;
text-align:center;
cursor:pointer;
font-size:18px;
margin-top:2px;
}

.sepeteekle-butonu button:hover {
background:#596275;
opacity: 0.9;
margin-top:5px;
}
Cevap yaz
Cevaplar (7)
waybillaspx
1011 gün önce

Kapsayıcı div'e display: grid; grid-template-columns: repeat(4, 1fr); verirsin ardından gap ile aralarını açarsın istediğin şekli alır.

yazilimyolcusu
1011 gün önce

Merhaba arkadaşlar. Özet olarak istediğim şu: Aşağıdaki kodlar ile aşağıdaki resmi oluşturmaya çalışıyorum. Yalnız dikkat ederseniz resimlerin arasında boşluk veremedim. Boşluk verdiğimde de ilk resim de yerinden sağa doğru kayıyor. "first-child" ile ilk resim için "0 margin" verdiğimde ise resimler birbirine yapışıyor.
https://www.hizliresim.com/om0w4fl
https://www.hizliresim.com/jtkjq79

<div class="sporcuurunleri-sayfasi-div">

<div class="sporcuurunleri-sayfasi-resim">
<img src="images/urunresimleri/<?php echo $sporcu["sporcuurunleri_resim"]; ?>">
</div>

<div class="sporcuurunleri-sayfasi-urunadi"><?php echo $sporcu['sporcuurunleri_urunadi']; ?>
</div>

<div class="sporcuurunleri-sayfasi-stokkodu"><?php echo $sporcu['sporcuurunleri_stokkodu']; ?>
</div>

<div class="sporcuurunleri-sayfasi-fiyati"><?php echo $sporcu['sporcuurunleri_urunfiyati']." TL"; ?>
</div>

<div class="sepeteekle-butonu"><button>Sepete Ekle</button></div>

</div>

aligokmen
1011 gün önce

Kodların Çok karmaşık gözüktüğü için okumadım. Lütfen "Markdown"lar ile ilgili makaleyi oku. markdown
Css'in Flex özelliği ile yapabilirsin.
Çalışan örneğinin linki için tıkla

flex-wrap kodu zorunlu değil ama ekran genişliği, resimler ekrana sığmayacak kadar küçük olduğu zaman resimleri alt satıra taşır.

CSS Kodları:

.resimler{
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  
}

img{
  width: 100px;
  height: 100px;
}

HTML Kodları:

<div class="resimler">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
</div>

tolunayemre
1011 gün önce

Dostum bu kadar kod karmaşası yapmak yerine olayı çok basit bir şekilde birkaç satır kod ile anlatırsan daha iyi yardımcı oluruz. Büyük ihtimal bu kadar kodu kimse okumadı. Bu yüzden yardım edemiyoruz.

yazilimyolcusu
1012 gün önce

Merhaba arkadaşlar. Sorunumu halâ halledemedim. Yardımcı olabilir misiniz?

yazilimyolcusu
1014 gün önce

İşe yaramadı. Sayfanın tam ortasına, altalta gelecek şekilde konumlandırdı. Yanyana getirmedi resimleri. "align-items" kullanmayacaktım zaten ama "justify-content:space-between" ve "flex-direction:row" da işe yaramadı. Bu arada "flex", "flex-direction:row", "justify-content:space-between" bunları "sporcuurunleri-sayfasi-div" div i içinde kullandım. "sporcuurunleri-marginleft-div" div i için kullandığımda bütün elementler yanyana geliyor. Resim, fiyat, ürün adı, buton hepsi yanyana geliyor.

yilmazev
1014 gün önce

Sorununuzu anlamadım ama resimleri yan yana getirmek için:

.kapsayici {
  display: flex; /* Flex'i tanımlarız */
  flex-direction: row; /* Resimleri yan yana getirir */
  align-items: center; /* Resimleri dikey olarak ortalar */
  justify-content: space-around; /* Tüm resimleri orantılı şekilde ayırır */
}

.resim {
  width: 100px; /* Genişliği 100 piksel */
  height: 100px; /* Yüksekliği 100 piksel */
}

Eğer sorunu çözemezseniz Discord üzerinden bana ulaşarak 2 - 5 TL arası değişen miktarlarda yardım yapabilirim :D

Sorun çözülmez ise ipucu: Flex özelliğinin aktif olması için resmin sahip olduğu bir önceki dive tanımlayın.

Discord: Hugoyin#7116
Facebook: https://www.facebook.com/HugoyinV2/