v2.5.2
Giriş yap

Css ile alta almak

emmir2
805 defa görüntülendi

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;
}
jct
1098 gün önce
<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;
	}
}