اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> * { box-sizing: border-box; } .box { float: left; width: 50%; padding: 50px; height: 300px; } .clearfix::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>جعبه ها با ارتفاع برابر</h2> <p>جعبه های شناور با ارتفاع یکسان:</p> <div class="clearfix"> <div class="box" style="background-color:#bbb"> <h2>جعبه 1</h2> <p>مقداری متن، مقداری متن، مقداری متن</p> </div> <div class="box" style="background-color:#ccc"> <h2>جعبه 2</h2> <p>مقداری متن، مقداری متن، مقداری متن</p> <p>مقداری متن، مقداری متن، مقداری متن</p> <p>مقداری متن، مقداری متن، مقداری متن</p> </div> </div> <p> این مثال خیلی انعطاف پذیر نیست. اگر بتوانیم تضمین کنیم که جعبه ها همواره از مقدار محتوای یکسانی در خود برخوردار هستند، خوب است که از ارتفاع(height) در css استفاده کنیم. اما همیشه اینطور نیست. اگر مثال بالا را در یک گوشی موبایل باز کنید(یا پنجره ی مرورگر را تغییر اندازه دهید) خواهید دید که حتوای جعبه ی دوم در بیرون از این جعبه نشان داده می شوند. </p> <p>اگر این راه حل، چیزی که ی خواهید نبود، به بخش آموزش ها بروید و یک راه حل دیگر را پیدا کنید. </p> </body> </html>
