v2.5.2
Giriş yap

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

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