spider man
جمعه 02 اسفند 1392, 19:45 عصر
سلام فکر کنم اینو میخواستید :
http://up.vbiran.ir/uploads/0pic_114613929998838306.png
لینک دانلود : http://up.vbiran.ir/uploads/1asilair_33278139299985616369.zip
و اما اموزش :
1. یک دایو اصلی درست میکنید که اینجا من اسمشو گذاشتم : container و بهش این خاصیت رو دادم :
.container {
width:700px;
margin:5% auto;
background:red;
}
*توضیح : برای اینکه اندازه مشخص داشته باشه و متماییز از دایو های داخلی اندازه رو 700 پیکسل گذاشتم و بخاطر اینکه وسط باشه مارجین بهش دادم و چپ و راست و اتو گذاشتم . یک پس زمینه قرمز هم دادم.
2. داخل این دایو اصلی دو تا دایو دیگه قرار دادم که اسم اولی از سمت راست : line1 و دومی بعدیش : line2 است که به هر کدام از کلاس ها خاصیت زیر رو دادم :
.line1 , .line2 {
width:100px;
float:right;
padding:5px;
}
* توضیح : برای اینکه عرض مشخص داشته باشه به هر دو کلاس عرض 100 دادم و بخاطر اینکه راست دایو مادر قرار بگیره به هر دو float راست دادم که سمت راست و پشت سر هم قرار بگیره . یه پدینگ 5 پیکسلی هم دادم برا اینکه از هم فاصله بگیرند و از اطراف دایو مادر .
3. داخل دو تا دایو line1 و line2 دایو های دیگه رو قرار دادم ( دایو کوچولو ها ) برا اینکه به هم نریزن و کلاس دهی بهتر باشه این کارو کردم ( استفاده از دایو های line1 و line2 ) وبهشون مشخصات زیر و دادم :
.line1 div , .line2 div {
width:100%;
height:100px;
border:1px solid #333;
margin-top:3px;
background:#fff;
}
* توضیح : کلاس .line1 div میگه که دایو های کوچولو ای که داخل دایو line1 و یا line2 قرار دارند مشخصات زیر رو بگیرند . عرض را برابر با 100 درصد دادم که کل عرض مادر (line1,line2)را بگیره و ارتفاع 100 پیکسل به هر کدام و یه بردر 1 پیکسلی سولاید و با رنگ مشکی نوک مدادی و یه مارجین تاپ برای حفظ فاصله بالا هر دایو کوچولو و پس زمینه سفید برای هر دایو کوچولو .
اینم تمام کد ها اگه نمیخواهید دانلود کنید :
<!DOCTYPE html>
<html>
<head>
<title>Asila Design Group</title>
<style>
.continer {
width:700px;
margin:5% auto;
background:red;
}
.line1 , .line2 {
width:100px;
float:right;
padding:5px;
}
.line1 div , .line2 div {
width:100%;
height:100px;
border:1px solid #333;
margin-top:3px;
background:#fff;
}
</style>
</head>
<body>
<div class="continer">
div orginal
<div class="line1">
<div>div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<div>div1</div>
</div>
<div class="line2">
<div>div2</div>
<div>div2</div>
<div>div2</div>
<div>div2</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
موفق باشید .
ظاهر کار درسته ولی نه با این روش !
دقی کنید من می خواهم بصورت نا محدود تگ div اضافه کنم.
مثلا شما اگر یک تگ div اصلی داشته باشید و بقیه تگ های div داخل ان را float : right بدهید آن وقت شما هرچی تگ اضافه کنید به سمت راست اضافه میشه و اگر به اخر تگ اصلی برسه باز میاد پایین اش. من همینطور می خواهم اما عمودی !
می خواستم ببینم میشه اینکار رو با html و css انجام داد یا نه !
اگر نشه باید با جاوا اسکریپت درست کنم.