کد لازم برای قرار دادن متن در اطراف یک تصویر نیاز دارید؟ به طور معمول زمانی که شما یک صفحه HTML ایجاد می کنید، همه چیز به صورت خطی جریان می یابد، به همین معنی یک بلوک مستقیما بعد از دیگری است. تمام پست های قبلی من نمونه ای از این، یعنی متن، پس از آن تصویر، متن و غیره است.
گاهی اوقات شما ممکن است بخواهید متن را در کنار یک تصویر بجای زیر قرار دهید. این متن پیچیده در اطراف تصویر نامیده می شود. در واقع متن ساده با استفاده از HTML بسیار ساده است.
با این حال، امروزه W3C توصیه می کند با استفاده از CSS به جای HTML برای این نوع از وظایف. من هر دو روش زیر را ذکر خواهم کرد، اما اگر بتوانید، بهتر است از CSS استفاده کنید، زیرا سازگاری بیشتری با طرح های وبسایت پاسخگو دارد.
قرار دادن متن در اطراف تصویر با استفاده از HTML
Lorem Ipsum دلار استرالیا نشسته، consectetur adipiscing elit. گنبد بزرگترین گنبد کبریت است. طرز تهیه قهوه تینتینت. تقدیر اجتماعی است که به صورت پنهانی و ماتریس می شود. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posure laoreet.
برای قرار دادن متن در کنار سمت راست تصویر، شما باید تصویر را به سمت چپ تطبیق دهید:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
اگر می خواهید متن در سمت چپ ظاهر شود و تصویر در سمت راست سمت چپ ظاهر شود، فقط پارامتر چین را به سمت راست تغییر دهید.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. گنبد بزرگترین گنبد کبریت است. طرز تهیه قهوه تینتینت. تقدیر اجتماعی است که به صورت پنهانی و ماتریس می شود. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posure laoreet.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
این همان است! خیلی آسان است؟ تنها زمانی که می خواهید از CSS استفاده کنید این است که اگر می خواهید حاشیه ها را به تصاویر اضافه کنید، بنابراین فاصله بین متن و تصویر وجود دارد.
شما می توانید حاشیه ها را به یک عکس با استفاده از کد زیر را در قالب CSS دنبال کنید:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
کد بالا از عنصر MARGIN CSS برای اضافه کردن 10 پیکسل فضای سفید در سمت راست تصویر استفاده می کند. از آنجا که تصویر سمت چپ را هم تراز کرده ایم، می خواهیم فضای فضای سفید را به سمت راست اضافه کنیم.
اساسا، چهار عدد نشانگر TOP LEFT سمت چپ هستند. بنابراین اگر می خواهید فضای سفید را به یک تصویر راست راست اضافه کنید، می توانید این کار را انجام دهید:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
بنابراین استفاده از HTML برای انجام این کار نسبتا ساده است، اما یک بار دوباره، ممکن است برای سایت های پاسخگو خوب کار نکند.
قرار دادن متن در اطراف تصویر با استفاده از CSS
روش بهتر برای قرار دادن متن در اطراف تصویر استفاده از CSS است.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
اگر چه من CSS را مستقیما به تگ تصویر در مثال HTML اضافه کردم، کنترل دقیق تر دانه را بر موقعیت عناصر می دهد و با استانداردهای کدگذاری مدرن کار می کند. ، شما هرگز نباید این کار را انجام دهید. در عوض، شما باید یک فایل جداگانه به نام یک شیوه ای که تمام کد CSS شما را نگه می دارد داشته باشید.
در برچسب IMG، شما به سادگی کلاس را به تگ اختصاص دهید و نام آن را بدهید. در مثال من، کلاس سمت چپرا نامگذاری کردم. در جدول شیوه من، همه چیزهایی که باید انجام دهم این است که کد زیر را اضافه کنید:
.left {
float: left;
padding: 0 10px 0 0;}
همانگونه که می بینید، 10px پلاگین را به سمت راست تصویر سمت چپ اضافه کردم . من همچنین از اموال شناور برای حرکت تصویر از جریان طبیعی سند و قرار دادن آن به سمت چپ کانتینر parent استفاده کردم.
همانطور که می بینید، بسیار تمیزتر از افزودن همه کد است به خود برچسب IMG همچنین مدیریت آسان تر است و شما می توانید از ویژگی های CSS بسیار بیشتر برای سفارشی سازی ظاهر در صفحه وب خود استفاده کنید. اگر سوالی دارید، لطفا نظر خود را بنویسید. لذت ببرید!