v2.5.2
Giriş yap

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

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

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;
}
css
Cevap yaz
Cevaplar (7)
waybillaspx
1252 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.

1
#005752
yazilimyolcusu
1253 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>
0
#005696
aligokmen
1253 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>
0
#005688
tolunayemre
1253 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.

0
#005685
yazilimyolcusu
1253 gün önce

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

0
#005681
yazilimyolcusu
1256 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.

0
#005611
yilmazev
1256 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/

0
#005610