v2.5.2
Giriş yap

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

yazilimyolcusu
2,587 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;
}
yazilimyolcusu
1286 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>