آموزش قرار دادن متن و تصویر کنار هم

یکی از مواردی که طراحان تازه کار با آن مشکل دارند قرار دادن متن و تصویر کنار هم است. در این آموزش به روش های مختلف css و bootstrap برای حل این موضوع می پردازیم.

1- استفاده از Float

یکی از راه ها برای کنار هم قراردادن متن و تصویر استفاده از خاصیت float در css می باشد. float باعث می شود یک تگ در صفحه شناور شود. چون به طور پیش فرض یک تگ block-level یک سطر کامل را اشغال می کند با به کاربردن float تگ به سمت راست یا چپ منتقل می شود.

.left{
    float:left;
    margin-right: 10px;
}
.clear{
    clear: both;
}

در این کد به تگ img یک کلاس left داده ایم و در css خاصیت float را برابر left قرارداده ایم. بنابراین تصویر به سمت چپ رفته و در کنار متن نمایش داده می شود. از سمت راست هم 10px حاشیه ایجاد کرده ایم که تصویر با متن کمی فاصله بگیرد. به float می توان مقدار right را هم اختصاص داد که در این صورت به سمت راست می رود.

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

2- استفاده از Flex

لایه بندی flex box یکی از تکنولوژی های جدید و محبوب در css است. به کمک این تکنیک هم می توانیم متن و تصویر را به راحتی کنار هم قرار دهیم.

.flex{
    display: flex;
}

در این مثال از یک container استفاده کردیم و خاصیت display آن را برابر flex قرار دادیم. بنابراین آیتم های درون آن مانند img و p می توانند کنار هم قرار گیرند.

به کمک دیگر خاصیت های flex می توانیم ترتیب قرار گرفتن آنها و یا تراز افقی و عمودی آنها را نیز تنظیم کرد.

3- استفاده از گرید بندی در بوت استریپ

در بوت استرپ از سطر و ستون ها می توان برای کنار هم قرار دادن محتواها استفاده کرد.

در این مثال از دو ستون هم اندازه استفاده کردیم و متن و تصویر را در آن ها قرار دادیم.

می توانیم اندازه ستون ها، حاشیه ها و... را با کلاس های کمکی بوت استرپ تغییر دهیم.

4- استفاده از کامپوننت در بوت استرپ

.media-body{
    margin-left: 10px;
}

کامپوننت media در بوت استرپ ظاهری شبیه توئیت ها ، کامنت ها و .... را فراهم می کند.

البته بوت استرپ کلاس های کمکی flex هم دارد که از آنها نیز می توان برای کنار هم قرار دادن متن و تصویر استفاده کرد.

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