افزایش نیافتن ارتفاع یک دایو با وجود height:auto; [بایگانی]

sara_aryanfar

سه شنبه 09 اسفند 1390, 15:52 عصر

با سلام من یک دایو دارم که داخل اون سه تا دایو رو زیر هم نشون دادم مشکلی که دارم اینه که دایو اولی وقتی ارتفاعش زیاد میشه به جای اینکه اون دوتا دیگه به پائین حرکت کنن دایو اول میره زیر دوتا پائینیه با وجود اینکه به داو اصلی هم height:auto; دادم چطوری باید سه تا دایو رو پشت سر هم به صورت ستونی گذاشت که زیر هم نرن

khanlo.javid

سه شنبه 09 اسفند 1390, 15:58 عصر

با سلام

دوست گرامی از float استفاده کردین؟

khanlo.javid

سه شنبه 09 اسفند 1390, 16:06 عصر

کدتو برام کلی بفرست تا بررسی کنم

buggen

سه شنبه 09 اسفند 1390, 17:03 عصر

سلام به صورت پیشفرض این اتفاق میوفته شما کدتون رو بذارید تا بهتر بشه کمک کرد
اگه از position absolute هم استفاده کردید ممکنه باعث این مشکل شده باشه
در اخر این سمپل ساده رو هم ببینید وتست کنید

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<div style="background:red;">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</diV>
<div style="background:green;" >
test2<br>
test2<br>
test2<br>
test2<br>
test2<br>
test2<br>
</div>
<div style="background:blue;">
test3<br>
test3<br>
test3<br>
test3<br>
test3<br>
test3<br>
</div>
</body>
</html>

آپدیت:ببخشید سوال رو اشتباه فهمیدم ،سمپل بالا ستونی نیست کد جدید رو ببینید

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<div style="background-color:red;float:left;width:20%;">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
<div style="background-color:green;float:left;width:60%;" >
test2<br>
test2<br>
test2<br>
test2<br>
test2<br>
test2<br>
</div>
<div style="background-color:blue;float:left;width:20%;;">
test3<br>
test3<br>
test3<br>
test3<br>
test3<br>
test3<br>
</div>

</body>
</html>

sara_aryanfar

سه شنبه 09 اسفند 1390, 19:00 عصر

کدتو برام کلی بفرست تا بررسی کنم
بله من ا فلوت استفاده کردم اینم می دونم که استفاده از فلوت باعث میشه فرم فرزند از والد پیروی نکنه

sara_aryanfar

سه شنبه 09 اسفند 1390, 19:31 عصر

با تشکر از دوستان باید به اطلاع برسونم طبق اون چیزی که من فهمیدم وقتی ما داخل یک دیو از چندین دیو دیگه به عنوان فرزند استفاده می کنیم حتما باید در آخر یک .clear
{
clear: both;
}
به کار ببریم تا صفحه ما به هم نریزه البته زمانی که از float استفاده می کنیم

Saber Mogaddas

پنج شنبه 11 اسفند 1390, 19:07 عصر

ا تشکر از دوستان باید به اطلاع برسونم طبق اون چیزی که من فهمیدم وقتی ما داخل یک دیو از چندین دیو دیگه به عنوان فرزند استفاده می کنیم حتما باید در آخر یک

clear{
clear: both;
}

.به کار ببریم تا صفحه ما به هم نریزه البته زمانی که از float استفاده می کنیم

نه دوست عزیز اگه از float به درستی استفاده کنید مشکلی پیش نمیاد..
clear فقط float رو خنثی میکنه و در جاهای خاص استفاده می شه..
موفق باشی..

khanlo.javid

پنج شنبه 11 اسفند 1390, 19:41 عصر

نه دوست عزیز اگه از float به درستی استفاده کنید مشکلی پیش نمیاد..
clear فقط float رو خنثی میکنه و در جاهای خاص استفاده می شه..
موفق باشی..
خوب شما راه بهتری داری پیشنهاد بده ولی float دیو فرزندو از دیو والد جدا میکنه اگه بگی چطور میشه خنثی کردش ممنون میشم.:قلب:

Saber Mogaddas

شنبه 13 اسفند 1390, 10:46 صبح

سلام
عرض کردم که از float باید به درستی استفاده کنید ..و مشکلی پیش نمیاد براتون..
می خواهید شما یه فایلی که به همین مشکل برخوردید رو ضمیمه کنید تا هم حل کنیم مشکل رو و هم توضیح بدم مشکلتون رو ..
موفق باشی..

Hell Lord

دوشنبه 15 اسفند 1390, 10:42 صبح

سلام
عرض کردم که از float باید به درستی استفاده کنید ..و مشکلی پیش نمیاد براتون..
می خواهید شما یه فایلی که به همین مشکل برخوردید رو ضمیمه کنید تا هم حل کنیم مشکل رو و هم توضیح بدم مشکلتون رو ..
موفق باشی..
یعنی چی باید از float درست استفاده کنید!؟؟
زمانی که از float استفاده میشه، هیچ تاثیری روی ارتفاع دایو نداره، چون که این خاصیت float هست!
حرف sara_aryanfar کاملا درسته و همیشه از این تکنیک استفاده میشه، تکنیک های دیگری هم هستش که قدیمیترین اونها همین استفاده از clear:both هست :

آخر دایو ها از
<br style='clear:both;line-height:1px' />
استفاده کن و همه چیز درست میشه.

روش دیگه استفاده از border در دایو پدر هست.
اینجا رو مطالعه کن :
http://www.quirksmode.org/css/clearing.html