علیرضا احمدی بابلانی : وب مهراز - جامعه برنامه نویسی ایران

قرار دادن دو div در کنار هم و نه زیر هم

چطور می تونم دو تا div رو کنار هم قرار دهم ؟
<section>
   <div></div>
   <div></div>
</section>
فرض کنین تو مثال بالا کد css زیر رو داریم:

section
{
    width:500px;
}
div
{
   width:250px;
   height:200px;
}
حالا چه کدی در  css باید بزنم تا این دو تا div توی section کنار هم قرار بگیرن ؟

پاســخ ها

7a1ba23bee0c433abe47664d2a9fa3c3
ایمان نکونام : برای اینکار شما باید از مقدار inline-block برای  مشخصه display استفاده کنید . و اگر می خواهید   این دو div در قسمت بالای section در کنار هم قرار گیرند مقدار top را برای مشخصه vertical-align ست کنین :

css:
section
{
    width:500px;
}
div
{
   width:250px;
   height:200px;
   display:inline-block;
   vertical-align:top;
}

حال برای اینکه فاصله بین دو div از بین برود font-size عنصر section را برابر صفر قرار دهید و font-size عنصر های div را روی مقدار دلخواه تنظیم کنید :
section
{
    width:500px;
    font-size:0;
}
div
{
   width:250px;
   height:200px;
   display:inline-block;
   vertical-align:top;
   font-size:12px;
}


روش دیگر برای اینکار استفاده از float می باشد که توصیه نمی شود.
دوشنبه 18 اسفند 1393 ساعت : 0 : 23
تعداد بازدید : 2406
ارسال به دوستان

ارسال