v2.5.2
Giriş yap

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

yazilimyolcusu
2,221 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;
}
yilmazev
1044 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/