Css'de resimleri yanyana getirip dağıtamadım
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;
}
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/