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;
}
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.