کنار هم چیدن تصاویر

H

hamed_hymn

Member
سلام به اساتید محترم
من یه تازه کارم یه مقدار تو سی اس اس به مشکل برخوردم
آخرین تصاویر مربوط به مطالب سایت به صورت 80×80 ایجاد میشه ( البته این اندازه اختیاری است)
من میخوام مثل چنین عکسی (که در پایین قرار دادم) تصاویر منظم حدود 5 تا عمودی و 5 تا افقی باشه ( فقط منظم بودنش برام اهمیت داره- البته تو عکس ردیف هاش کمتره فقط نمونه است)
میشه بنده را راهنمائی کنید.
نتیجه کلی : کد CSS که تصاویر ( سبز پررنگ ) در زمینه (سبز کم رنگ) به صورت منظم در کنار و زیر هم قرار بگیرد.
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
انجمن جای رفع مشکل هست، نه در خواست کد. استثنا بفرمایید:
کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	#wrp {
		width:540px;
		background:#0F9;
		padding:10px;
	}
	#wrp img {
		width:80px;
		height:80px;
		background:#060;
		float:left;
		margin:5px;
	}
	.cb {
		clear:both;
	}
		
</style>
</head>

<body>
	<div id="wrp">
    	<img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <img src="site2/site/images/temp3.jpg" alt="" />
        <div class="cb"></div>
    </div>

</body>
</html>
موفق باشید
 
Cyletech

Cyletech

Member
از float استفاده کنید. تا تصاویر رو در کنار هم نمایش داد. البته بستگی داره. اگر تصاویر پس زمینه تگ دیو باشن ، خب باید display: inline هم اضافه کنی. و ...
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا