Css ile alta almak
Merhabalar resim yükleme alanı ortada oluyor normalde resim yüklenince sağa doğru kayıyor 4. resim den sonra alta inmesini istiyorum bunu nasıl yapabilirim çok
<div class="upload__item">
<div class="upload__col">
<div class="upload__file" id="resimler">
<?php
$i = 0;
if(isset($_GET['duzenle_id'])){
$cek = $db->query("SELECT * FROM urun_img WHERE urun_id = '{$_GET['duzenle_id']}' ", PDO::FETCH_ASSOC);
if($cek->rowCount()){
foreach( $cek as $c ){
echo '<div class="upload__icon" data-resim-dis-id="'.$i.'">
<div class="uploaddis pasif" >
<div class="yuklendi " style="float:left;">
<img src="../upload/'.$c['img'].'" style="width:140px">
<div class="icon" data-resim-sil-id="'.$i.'"><span class="fa fa-trash"></span></div>
<input type="hidden" name="img[]" value="'.$c['img'].'" required="">
</div>
</div>
</div>';
$i++;
}
}
}
?>
<div class="upload__icon">
<div class="uploaddis aktif" data-id="1" style="margin:0 auto;">
<div class="upload1">
<span class="metin" style="width: 100%;float: left;">Ürün Resimi Yükle</span>
<div class="icon"><span class="fa fa-upload" data-id="1"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
.upload__col {
margin: 0 10px;
}
.upload__file {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 190px;
margin-top: 58px;
border-radius: 16px;
overflow: hidden;
background: #f4f5f6;
align-content: center;
align-items: baseline;
flex-wrap: wrap;
}
.upload__icon {
margin-bottom: 10px;
}
.uploaddis {
border: 2px dashed #c3c3c3;
display: table;
table-layout: fixed;
margin-bottom: 10px;
margin-right: 20px;
}
.uploaddis .yuklendi {
position: relative;
}
.uploaddis .yuklendi .icon {
position: absolute;
right: -30px;
top: -30px;
width: 30px;
height: 30px;
padding: 6px 0px;
}
.uploaddis {
border: 2px dashed #c3c3c3;
display: table;
table-layout: fixed;
margin-bottom: 10px;
margin-right: 20px;
}
.uploaddis .upload1 {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 15px 30px;
}
.uploaddis .upload1 .metin {
font-weight: 300;
font-size: 13px;
color: #807e7e;
}
<div class="yuklendi " style="float:left;"></div>
Hocam anladığım kadarıyla açıklamaya çalışayım; Yukarıdaki bölüm de style gerek yok, flex ile yaparsanız 4. den sonra aşağı sürüklenir. Örneğin;
.yuklendi{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
img, div{
width: calc(100% / 4); height: auto;
}
}