cyrusthegreat
شنبه 01 بهمن 1390, 23:45 عصر
سلام دوست عزیز
ما فرض می کنیم کد صفحه اینجوری باشه:
<!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" xml:lang="en" lang="en">
<head>
<title>Floating</title>
</head>
<body>
<div class="left-content">
Left Content Is Here
</div>
<div class="center-content">
Center Content Is Here
</div>
<div class="right-content">
Right Content Is Here
</div>
<div style="clear: both"></div>
</body>
</html>
CSS ما هم اینجوری می شه:
body { width: 996px }
.left-content {
float: left;
width: 24%;
margin-right: 1%;
}
.center-content {
float: left;
width: 48%;
margin: 0 1%;
}
.right-content {
float: left;
width: 24%;
margin-left: 1%;
}
توی این CSS ما اول تمام دایو هامون رو با استفاده از float: left به چپ صفحه فرستادیم. بعدش اومدیم اندازه ی هرکدوم رو با توجه به نیازمون مشخص کردیم. که اینجا ما فرض کردیم دو طرف اندازه یکسان، و بخش وسط از دو طرف بزرگتر باشه. بعدش هم اومدیم یک margin بین هر دایو دادیم تا فاصله ما مشخص بشه. فط توجه کنید که جمع طول هر دایو با فاصله های بین دایو ها شده 100%. البته کمتر می تونه بشه ها ولی بیشتر از اون باعث می شه که اون آخری، یعنی content-right ما در کنار بقیه قرار نگیره و به پایین اون دوتا منتقل بشه.
نکته آخر هم استفاده از clear هست که توی اینجا (http://barnamenevis.org/showthread.php?324153-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA-%D8%AF%D8%B1-css&p=1423928&viewfull=1#post1423928)توضیح دادم راجع بهش.