کار با DIV ها و Float

[alizanganeh]

سلام دوستان عزیز
متاسفانه هیچ تاپیکی برای CSS پیدا نکردم واسه همین مجبور شدم بیام از شما بپرسم .

توی سایتم در قسمت DIV ها ، 2 تا DIV دارم که داخل یک DIV مادر قرار گرفتن .
من میخوام این دوتا کنار هم قرار بگیرن ، پس به DIV دوم Float : Right میدم که به بالایی Float میدم.
در هر صورت ، اون DIV که فلوت گرفته میره به سمت چپ و از DIV مادر میاد بیرون . یعنی از داخل اون شروع میشه ولی پایینش از DIV مادر میزنه بیرون .
و وقتی به هر دو DIV فلوت میدم ، هردو میان بیرون و DIV مادر خالی میشه و بالا و پایینش میچسپن به هم .

Position هم ندارم اصلا . البته انواع پوزیشن رو هم امتحان کردم ولی نشده .

نمونه ی اتفاقی که افتاده رو براتون نوشتم که توی ضمیمه گذاشتم ببینید.


نمیدونم داستان چیه . اگر میشه بگید بهم که چیکار کنم .
ممنون

[alireza_s_84]

سلام دوستان عزیز
متاسفانه هیچ تاپیکی برای CSS پیدا نکردم واسه همین مجبور شدم بیام از شما بپرسم .

توی سایتم در قسمت DIV ها ، 2 تا DIV دارم که داخل یک DIV مادر قرار گرفتن .
من میخوام این دوتا کنار هم قرار بگیرن ، پس به DIV دوم Float : Right میدم که به بالایی Float میدم.
در هر صورت ، اون DIV که فلوت گرفته میره به سمت چپ و از DIV مادر میاد بیرون . یعنی از داخل اون شروع میشه ولی پایینش از DIV مادر میزنه بیرون .
و وقتی به هر دو DIV فلوت میدم ، هردو میان بیرون و DIV مادر خالی میشه و بالا و پایینش میچسپن به هم .

Position هم ندارم اصلا . البته انواع پوزیشن رو هم امتحان کردم ولی نشده .

نمونه ی اتفاقی که افتاده رو براتون نوشتم که توی ضمیمه گذاشتم ببینید.


نمیدونم داستان چیه . اگر میشه بگید بهم که چیکار کنم .
ممنون

<div style="background-color: red; width: 300px; direction: rtl;"> <div style="background-color: green; width: 100px; float: right;">Right</div>
<div style="background-color: yellow; width: 190px; margin-right: 100px;">Left</div>


<div style="width: 0px; height: 0px; clear: both;"></div>
</div>

[alizanganeh]

<div style="background-color: red; width: 300px; direction: rtl;"> <div style="background-color: green; width: 100px; float: right;">Right</div>
<div style="background-color: yellow; width: 190px; margin-right: 100px;">Left</div>


<div style="width: 0px; height: 0px; clear: both;"></div>
</div>



ممنون
اینی که فرستادی توی کدهای خودت درسته .
ولی وقتی همینو روی کدهای خودم اعمال میکنم ، دو تا DIV میرن سمت راست و روی هم قرار میگیرن انگار که اصلا هیچ Float داده نشده .
کد اصلی رو توی ضمیمه برات گذاشتم ببین

[alireza_s_84]

ممنون
اینی که فرستادی توی کدهای خودت درسته .
ولی وقتی همینو روی کدهای خودم اعمال میکنم ، دو تا DIV میرن سمت راست و روی هم قرار میگیرن انگار که اصلا هیچ Float داده نشده .
کد اصلی رو توی ضمیمه برات گذاشتم ببین
به تغییراتی که دادم توجه کنید

[alizanganeh]

آقا دمت گرم درست شد .
ولی یک سوال :

توی DIV دوم شما margin-right رو 160 کردی . ولی چرا وقتی اینو بر میدارم ، DIV دوم دوباره میاد زیر اولی ؟ چه ربطی داره ؟
و اینکه من میخوام مارجین هارو auto کنم که هردو DIV بیان وسط ولی الان وقتی مقدار دستی بهش بدم دیگه مجبورم اون کار رو نکنم و اون دوتا سمت راست میمونن !!!

[alireza_s_84]

آقا دمت گرم درست شد .
ولی یک سوال :

توی DIV دوم شما margin-right رو 160 کردی . ولی چرا وقتی اینو بر میدارم ، DIV دوم دوباره میاد زیر اولی ؟ چه ربطی داره ؟
و اینکه من میخوام مارجین هارو auto کنم که هردو DIV بیان وسط ولی الان وقتی مقدار دستی بهش بدم دیگه مجبورم اون کار رو نکنم و اون دوتا سمت راست میمونن !!!

margin برای div دوم میشه همون عرض div اول ، دلیل اینکارهم اینه که من فقط یک div رو شناور کردم (همون float) و دومی سرجای خودش نمایش داده میشه. حالا وقتی div که من شناور کردم میاد جاش و میگیره div دوم میره پایین ولی اگر بهش به اندازه عرض div شناور شده margin بدین جای لازم برای قرار گرفتن div شناور شده وجود داره و دوتا div کنار هم قرار میگیرن.
div آخری که با عرض و ارتفاع 0 و همچنین clear:both قرار دادم برای اینه که المنت های بعدی بطور صحیح نمایش داده باشن ، ارتفاع div والد هم درست محاسبه بشه و با تغییر ارتفاع div های شناور شده ارتفاع اون هم تغییر بکنه.
برای اینکه div در وسط نمایش داده باشن شما باید div والد رو بهش یک عرض ثابت بدی و اونجا margin: 0 auto رو اعمال کنی تا کلا در وسط نمایش داده باشه. همیشه یادتون باشه در المنت هایی که شناور شدن نمیتونید بطور مستقیم با خاصیت margin اون المنت رو وسط داکیومنت تراز کنید.
موفق باشید

[alizanganeh]

ممنون عزیزم حل شد مشکلم ♥