چگونه می توان متن html را دور یک تصویر ایجاد کرد؟ راه های لغو float در HTML.

آخرین به روز رسانی: 1395/04/21

به طور معمول، تمام بلوک ها و عناصر در یک صفحه وب به ترتیبی که در کد html تعریف شده اند، در مرورگر ظاهر می شوند. با این حال، CSS ویژگی float خاصی را ارائه می دهد که به ما امکان می دهد عناصر را به صورت شناور تنظیم کنیم، بنابراین می توانیم صفحات وب جالب و متنوع تری را در طراحی آنها ایجاد کنیم.

این ویژگی می تواند یکی از مقادیر زیر را داشته باشد:

چپ: عنصر به سمت چپ حرکت می کند و تمام محتوایی که در زیر آن قرار می گیرد در لبه سمت راست عنصر قرار می گیرد.

راست: عنصر به سمت راست حرکت می کند

none: wrap را لغو می کند و جسم را به موقعیت عادی خود باز می گرداند

هنگام استفاده از ویژگی float بر روی عناصری غیر از عنصر img که باید استایل دهی شود، توصیه می شود ویژگی width را تنظیم کنید.

بنابراین، تصور کنید که باید تصویری را در صفحه سمت چپ متن اصلی نمایش دهیم، یک نوار کناری در سمت راست و بقیه فضا را متن اصلی مقاله اشغال کند. بیایید ابتدا رابط صفحه را بدون خاصیت float تعریف کنیم:

ال. تولستوی. جنگ و صلح. جلد دو. قسمت سوم

درخت بلوط کهنسال که کاملاً دگرگون شده بود، مانند چادری از سبزه‌های سرسبز و تیره گسترده شده بود، کمی تکان می‌خورد و کمی زیر پرتوهای خورشید غروب می‌تابید...

شاهزاده آندری در نهایت و به طور غیرقابل برگشت تصمیم گرفت: "نه، زندگی در 31 سالگی تمام نشده است."

در این مورد، ما یک قرار دادن متوالی عناصر در صفحه را دریافت خواهیم کرد:

اکنون در همان صفحه، ویژگی float را اعمال می کنیم و استایل ها را به صورت زیر تغییر می دهیم:

تصویر ( شناور: چپ؛ /* شناور سمت چپ */ حاشیه: 10 پیکسل؛ حاشیه-بالا: 0 پیکسل؛ ) نوار کناری (حاشیه: 2 پیکسل یکدست #cccc؛ رنگ پس‌زمینه: #eee؛ عرض: 150 پیکسل؛ بالشتک: 10 پیکسل؛ حاشیه- چپ: 10 پیکسل؛ اندازه قلم: 20 پیکسل؛ شناور: راست؛ /* بسته بندی به سمت راست */ )

قرار دادن عناصر در صفحه بر این اساس تغییر می کند:

عناصری که خاصیت float به آنها اعمال می شود، عناصر شناور نیز نامیده می شوند.

بدون جریان در اطراف. دارایی روشن

گاهی اوقات ممنوعیت جریان ها ضروری می شود. یک کار مشابه ممکن است مرتبط باشد اگر برخی از بلوک ها باید به یک خط جدید منتقل شوند و اطراف یک عنصر شناور قرار نگیرند. به عنوان مثال، پاورقی، به عنوان یک قاعده، باید به شدت در پایین قرار داشته باشد و در سراسر عرض صفحه کشیده شود. اگر یک عنصر شناور در جلوی پاورقی وجود داشته باشد، ممکن است پاورقی در اطراف این عنصر جریان داشته باشد که مطلوب نیست.

برای جلوگیری از بسته‌بندی عناصر، CSS از ویژگی clear استفاده می‌کند که به مرورگر می‌گوید که عنصری که استایل‌سازی می‌شود نباید روی آن wrapping اعمال شود.

ویژگی clear می تواند مقادیر زیر را داشته باشد:

چپ: عنصر استایل شده می تواند دور عنصر شناور به سمت راست بپیچد. در سمت چپ جریان کار نمی کند

راست: عنصر استایل شده فقط می تواند در سمت چپ عنصر شناور شناور شود. و در سمت راست جریان کار نمی کند

هر دو: عنصر استایل داده شده می تواند اطراف عناصر شناور بپیچد و نسبت به آنها به سمت پایین حرکت کند

none: عنصر استایل شده به صورت استاندارد رفتار می کند، یعنی در جریان راست و چپ شرکت می کند

به عنوان مثال، فرض کنید یک فوتر در یک صفحه وب تعریف شده است:

وجود یک wrap یک صفحه نمایش نادرست ایجاد می کند که در آن پاورقی به سمت بالا حرکت می کند:

بیایید سبک پاورقی را تغییر دهیم:

پاورقی (حاشیه بالا: 1px جامد #cccc؛ واضح: هر دو؛ )

اکنون فوتر در اطراف تصویر جریان پیدا نمی کند، بلکه پایین می رود.

در این مقاله به گزینه هایی برای پیچیدن متن در اطراف یک عکس می پردازیم. راه های مختلفی وجود دارد. بیایید به هر یک از آنها نگاه کنیم. برای شروع به شما توصیه می کنم تگ html مقاله را بخوانید داشتن دانش اولیه از تصاویر در صفحات html.

1. بسته بندی با استایل تگ

تصویر را می توان تنها با استفاده از سبک های تگ CSS تراز کرد . همانطور که می دانید، نحو تگ به شما امکان می دهد تراز تصویر را در ویژگی ها تنظیم کنید:

جایی که VALUE می تواند مقادیری را بگیرد

• تراز چپ - چپ
• تراز راست - راست
• پایین - تراز به خط اول متن (این حالت پیش فرض است)
• بالا - تراز به خط بالای متن
• وسط - تراز با خط پایه متن

مثلا

متن متن متن متن متن متن متن متن متن متن متن متن

به نظر می رسد تصویر با متن چسبیده است، بنابراین ما چند تورفتگی ایجاد می کنیم. علاوه بر این، دو گزینه برای چگونگی انجام این کار وجود دارد.

گزینه 1.1. از طریق ویژگی CSS - hspace و vspace
برای انجام این کار، در ویژگی های برچسب دو مقدار اضافه کنید:

این چیزی است که در صفحه به نظر می رسد:

ویژگی hspace به ترتیب padding افقی را در پیکسل، vspace - padding عمودی را مشخص می کند.

گزینه 1.2. از طریق ویژگی CSS - padding و margin
برای انجام این کار، در ویژگی های برچسب دو مقدار اضافه کنید:

این چیزی است که در صفحه به نظر می رسد:

به دلیل این که در سمت چپ تورفتگی نداشتیم بهتر به نظر می رسد. به جای حاشیه، می توانید از padding استفاده کنید، اثر مشابه خواهد بود.

استفاده از ویژگی float به جای align

علاوه بر ویژگی align در ویژگی های تگ استایل ها دارای یک ویژگی شناور CSS هستند که وظیفه تراز کردن را نیز بر عهده دارد. نحو به شرح زیر است:

شناور :right; // تراز سمت راستشناور به سمت چپ؛ // تراز چپ

به عنوان مثال، اگر خروجی تصویر را در مثال قبلی به صورت زیر بنویسید:

سپس به شکل زیر تبدیل می شود.

ولاد مرژویچ

عناصر شناور را آن دسته از عناصری می نامیم که در اطراف سایر اشیاء صفحه وب، به عنوان مثال، متن پرواز می کنند. درست تر است که بگوییم "عناصر کارآمد"، اما از طرف دیگر، اصطلاح "عنصر شناور" مدت هاست که مورد استفاده قرار گرفته است، بنابراین در آینده از آن استفاده خواهم کرد.

عناصر شناور به طور فعال در چیدمان صفحات وب استفاده می شوند و برای اجرای این و سایر وظایف به کار می روند:

• پیچیدن متن در اطراف تصاویر؛
• ایجاد ستون های فرعی؛
• منوهای افقی؛
• ستون ها.

Wrapping با استفاده از ویژگی float style با مقدار چپ یا راست انجام می شود. به‌طور پیش‌فرض، wrapping عنصر تنظیم نشده است، اما اگر به دلایلی باید به صراحت مشخص شود، مقدار باید روی none تنظیم شود. در شکل شکل 3.32 نتیجه اعمال مقادیر مختلف بر روی یک تصویر در کنار متن را نشان می دهد.

برنج. 3.32. پیچیدن متن دور یک عکس

خود کد HTML تقریباً بدون تغییر باقی می ماند و در مثال 3.21 نشان داده شده است.

مثال 3.21. استفاده از شناورها

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

این مثال نشان می دهد که چگونه می توان یک ویژگی float را با مقدار باقی مانده به یک برچسب اضافه کرد . این مقدار عنصر را در لبه چپ والد یا دیگر عنصر شناور تراز می کند و همه عناصر دیگر مانند متن به سمت راست شناور می شوند. از سوی دیگر، مقدار right، عنصر را در لبه سمت راست والد یا دیگر عنصر شناور تراز می‌کند و همه عناصر دیگر، مانند متن، آن را به سمت چپ می‌کشند.

بنابراین، ما اصطلاحات را مرتب کردیم. بیایید به مثال 3.21 اضافه کنیم تا طراحی با متن هماهنگ شود. مهمترین چیز این است که تورفتگی را در سمت راست تصویر و در صورت لزوم در زیر قرار دهید. برای این کار به تگ بروید کلاسی به نام fig اضافه می شود که دارای مجموعه ویژگی margin است؛ به طور همزمان حاشیه آن را در هر طرف تصویر تعیین می کند (مثال 3.22).

مثال 3.22. دور عکس بپیچید

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

وینی پو همیشه از خوردن کمی طراوت بیزار بود، مخصوصاً در ساعت یازده صبح، زیرا در آن زمان صبحانه مدت زیادی به پایان رسیده بود و ناهار هنوز شروع نشده بود. و البته از دیدن اینکه خرگوش فنجان ها و بشقاب ها را بیرون می آورد به شدت خوشحال شد.

نتیجه مثال در شکل نشان داده شده است. 3.33.

برنج. 3.33. تصویر تراز چپ، پیچیده شده در سمت راست

ایجاد قاب

نوار کناری بلوکی با تصاویر و متن است که در متن اصلی جاسازی شده است. نوار کناری معمولاً در لبه چپ یا راست بلوک متن قرار دارد و متن اصلی در اطراف آن در طرفین دیگر جریان دارد (شکل 3.34).

برنج. 3.34. نوع درونی

برای اینکه نوار کناری در متن برجسته شود، معمولاً روی یک رنگ پس زمینه تنظیم می شود و یک حاشیه اضافه می شود. از نظر ظاهری، فریم‌ها شبیه روش بالا برای پیچیدن متن در اطراف یک عکس هستند، بنابراین کد ایجاد فریم تقریباً مشابه قبلی است (مثال 3.23).

مثال 3.23. اضافه کردن یک قاب

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ابزار Magic Erase پیکسل هایی را که رنگ مشابهی دارند پاک می کند. اگر روی یک لایه پس‌زمینه یا لایه‌ای کار می‌کنیم که شفافیت آن قفل شده است، پیکسل‌ها با رنگ پس‌زمینه جایگزین می‌شوند. در تمام موارد دیگر، ما یک ناحیه شفاف خواهیم داشت.

اصل کار با ابزار Magic Erase مشابه کار با ابزار Magic Wand است. یعنی ابتدا مقدار Tolerance مناسب را تنظیم می کنیم، چک باکس Anti-aliased را فعال می کنیم تا حاشیه های صاف ایجاد کند، تیک گزینه Contiguous را برداریم تا همزمان کل پس زمینه حذف شود و سپس روی عکس در منطقه آسمان کلیک می کنیم. اگر لایه Background قبلاً تغییر نام داده شود، مناطق شفاف در مکان های مناسب دریافت خواهیم کرد.

هنگام ایجاد فریم، باید عرض آن را با استفاده از ویژگی width مشخص کنید. در غیر این صورت، اندازه لایه بسیار گسترده تر از نیاز خواهد بود.

طرح لایه به صورت افقی

به طور پیش فرض، عناصر بلوک به صورت عمودی یکی زیر دیگری ردیف می شوند، اما با استفاده از ویژگی float می توانید آنها را مجبور کنید که به صورت افقی در کنار یکدیگر قرار گیرند. در این حالت باید عرض لایه ها را تنظیم کرده و برای آنها شناور تنظیم کنید. اگر عرض مشخص نشده باشد، با در نظر گرفتن حاشیه ها و حاشیه ها، برابر با محتوای لایه خواهد بود. مثال 3.24 کاتالوگ محصول ایجاد شده در بخش قبل را با استفاده از عناصر بلوک درون خطی می گیرد و برای استفاده از float دوباره کار می کند. برای قابل مشاهده کردن بلوک ها، پس زمینه صفحه وب به رنگ خاکستری تنظیم می شود.

مثال 3.24. بلوک های افقی

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

نتیجه مثال در شکل نشان داده شده است. 3.35.

برنج. 3.35. قرار دادن لایه هنگام استفاده از ویژگی float

به دلیل متن متفاوت در امضا، ارتفاع بلوک ها نیز متفاوت است، به همین دلیل است که برخی از بلوک ها به دیگران می چسبند و به خط دیگری منتقل نمی شوند. تنظیم ارتفاع همه بلوک ها از طریق ویژگی height، مانند 100px، یا بازگشت به استفاده از display : inline-block می تواند در اینجا کمک کند.

اثر جریان

ویژگی float علاوه بر قابلیت ایجاد عناصر شناور، دارای تعدادی ویژگی است که باید در مورد آنها بدانید. ویژگی اصلی این است که شناور بر تمام عناصر مجاور تأثیر می گذارد و آنها را مجبور به مشارکت در جریان می کند. بیایید به این موضوع در مثال 3.25 نگاه کنیم، که نشان می‌دهد چگونه می‌توان فلش‌هایی را روی یک خط با استفاده از مقادیر چپ و راست ویژگی float ایجاد کرد.

مثال 3.25. اثر جریان

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

اگرچه متن و فلش‌ها از عناصر بلوک متفاوتی استفاده می‌کنند و باید روی خطوط مختلف قرار گیرند، اثر شناور باعث می‌شود که متن با قرار گرفتن در منطقه جریان بالاتر برود (شکل 3.36). همچنین رنگ پس‌زمینه لایه پیکان به دلیل اینکه عناصر شناور در جریان سند شرکت نمی‌کنند نمایش داده نمی‌شود، در اصل این همان خالی ماندن لایه پیکان است.

برنج. 3.36. تأثیر بسته بندی بر متن زیرین

عناصر شناور بر ارتفاع بلوکی که در آن قرار دارند تأثیر نمی گذارد. برای تشخیص این، کافی است بلوک را با یک قاب احاطه کنید و یک عنصر شناور با متن داخل آن قرار دهید (مثال 3.26).

مثال 3.26. ارتفاع بلوک

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ترسیم بر ارتفاع لایه تأثیر نمی گذارد و از محدودیت های آن فراتر می رود (شکل 3.37).

برنج. 3.37. ارتفاع لایه شناور

همه این ویژگی‌های عناصر شناور می‌توانند تأثیری کاملاً ناخوشایند بر طرح‌بندی یک صفحه وب داشته باشند، به خصوص در مواردی مانند موارد ذکر شده در بالا. راه اصلی برای دستیابی به نتیجه مطلوب، لغو بسته بندی در لحظه مناسب است. راه های مختلفی برای این کار وجود دارد.

لغو Wrap

Wrapping یک ابزار چیدمان قدرتمند است که برای تراز و سازماندهی عناصر استفاده می شود. با این حال، برای تحت کنترل نگه داشتن این ابزار، به یک وزنه تعادل نیاز است که بدون آن، پتانسیل عظیم شناور به چند کار باریک کاهش می یابد. ما در مورد لغو جریان با استفاده از روش های مختلف صحبت می کنیم. بیایید چهار مورد از محبوب ترین ها را فهرست کنیم.

عرض عنصر

اگر یک عنصر شناور کل عرض موجود را اشغال کند، عناصر باقیمانده پس از آن در یک خط جدید شروع می شوند. برای این کار باید ویژگی width را با مقدار 100% فعال کنید. بنابراین، سبک در مثال 3.25 را می توان به صورت زیر تکمیل کرد:

چپ ( شناور: چپ؛ عرض: 50%؛ ) .راست ( شناور: راست؛ عرض: 50%؛ تراز متن: راست؛ )

هر لایه پیکان اکنون 50٪ عرض را اشغال می کند و آنها تا 100٪ عرض اضافه می کنند، بنابراین پاراگراف بعد از لایه پیکان در یک خط جدید شروع می شود.

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

استفاده از سرریز

ویژگی سرریز نمایش محتویات یک عنصر بلوک را در صورتی که کل محتوا مناسب نباشد و فراتر از مساحت ابعاد مشخص شده باشد، کنترل می کند. مقدار خودکار به ویژه نوارهای اسکرول را در صورت نیاز اضافه می کند، در حالی که hidden فقط ناحیه داخل عنصر را نمایش می دهد و بقیه را پنهان می کند. علاوه بر این، استفاده از سرریز با مقدار خودکار، اسکرول یا مخفی، اثر شناور را لغو می‌کند. سبک به عنوان مثال 3.25 تنها با یک خط تکمیل می شود:

پیکان (سرریز: پنهان؛ )

نتیجه بلافاصله پس از اعمال ویژگی سرریز تغییر می کند (شکل 3.38).

برنج. 3.38. اثر ویژگی سرریز در پس زمینه

مثال 3.26 به طور مشابه تکمیل شده است:

DIV (سرریز: پنهان؛)

نتیجه در شکل نشان داده شده است. 3.39.

برنج. 3.39. اثر ویژگی سرریز بر روی مرز

سرریز یکی از محبوب ترین خواصی است که همراه با شناور کار می کند. اما گاهی اوقات شرایطی پیش می آید که استفاده از این روش غیرقابل قبول باشد. این در مواردی اتفاق می افتد که عنصر از محدوده عنصر فراتر می رود، در این صورت "قطع" خواهد شد. در مثال 3.27، تصویر به سمت چپ موقعیت اصلی خود منتقل می شود.

مثال 3.27. منطقه یک عنصر را برش دهید

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

بازدید وینی پو از خرگوش

نتیجه مثال در شکل نشان داده شده است. 3.40.

برنج. 3.40. برش عکس

در IE6، این روش تنها زمانی کار می کند که ویژگی hasLayout تنظیم شده باشد. برای فعال کردن آن، می توانید بزرگنمایی : 1 را به همراه ویژگی سرریز اضافه کنید.

دارایی روشن

برای لغو اثر float از ویژگی clear با مقادیر زیر استفاده کنید.

• چپ - بسته بندی را از لبه چپ عنصر لغو می کند (شناور: چپ). در این حالت، تمام عناصر دیگر در این سمت پایین آمده و در زیر عنصر فعلی قرار می گیرند.
• راست - جریان سمت راست عنصر را لغو می کند (float: right).
• هر دو - جریان عنصر را از لبه های راست و چپ به طور همزمان لغو می کند. توصیه می شود زمانی که می خواهید بسته بندی یک عنصر را لغو کنید، این مقدار را تنظیم کنید، اما دقیقا نمی دانید از کدام طرف.

برای لغو افکت wrapping، ویژگی clear باید به عنصری که بعد از floated می آید اضافه شود. معمولا یک کلاس یونیورسال معرفی می کنید، مثلاً پاک کنید و یک تگ خالی درج می کنید

با این کلاس (مثال 3.28).

مثال 3.28. با استفاده از شفاف

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

←

→

در این مثال، کلاس clear دارای ویژگی clear است که روی هر دو تنظیم شده است. در صورت نیاز به استفاده از مقادیر مختلف، می توانید چندین کلاس را وارد کرده و در صورت نیاز آنها را اعمال کنید.

این روش همچنین به دلیل سادگی و تطبیق پذیری یکی از محبوب ترین ها در چیدمان است. اما باز هم گاهی اوقات ترکیباتی وجود دارد که در آن استفاده از clear با شکست مواجه می شود. این زمانی اتفاق می افتد که کد شما به طور همزمان با چندین شناور مختلف روبرو می شود. بنابراین در مثال 3.29 از float برای ایجاد دو ستون استفاده می شود و در ستون سمت راست، float عکس ها را مرتب می کند.

مثال 3.29. استفاده از شناورها

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

منو

بهترین عکس ها

توسط نظرات

کلیسای جامع سنت سوفیا

کلیسای لهستانی

خط جدید

زیر زمین

نتیجه مثال در شکل نشان داده شده است. 3.41. ویژگی clear نه تنها بر کلاس عکس، بلکه بر کلاس col1 نیز تأثیر می گذارد، یعنی. در تمام عناصر بالا که شناور تنظیم شده اند. بنابراین، "خط جدید" بلافاصله بعد از عکس ها شروع نمی شود، بلکه پس از پایان ستون سمت چپ شروع می شود.

برنج. 3.41. خطا در نمایش رشته

در چنین شرایطی، ترکیبی از روش های مختلف کمک می کند. بنابراین، عکس‌ها را می‌توان به یک ظرف اضافه کرد که سرریز و شفاف حذف شده است. ستون به شکل زیر خواهد بود.

کلیسای جامع سنت سوفیا

کلیسای لهستانی

خط جدید

شبه عنصر: بعد

درج مکرر یک برچسب خالی

با ویژگی clear کد را به هم می ریزد، به خصوص زمانی که به طور فعال از ویژگی float استفاده می کنید. منطقی است که همه چیز را به سبک منتقل کنید و از شر برچسب های غیر ضروری خلاص شوید. برای این کار از شبه عنصر :after استفاده می کنیم که در ترکیب با ویژگی content، متنی را بعد از عنصر اضافه می کند. شما می‌توانید ویژگی‌های سبک را برای چنین متنی اعمال کنید، به ویژه clear. تنها چیزی که باقی می ماند این است که متن نمایش داده شده را از مرورگر پنهان کنید.

Clearleft:after ( content: "."; /* نمایش متن بعد از عنصر (نقطه) */ clear: left؛ /* لغو بسته بندی */ visibility: hidden; /* مخفی کردن متن */ نمایش: block; / * عنصر بلوک * / ارتفاع: 0؛ /* ارتفاع */ )

مهم نیست کدام کاراکتر نمایش داده شود؛ در هر صورت از طریق قابلیت مشاهده از کاربر پنهان می‌شود، اما حتی در صورت پنهان بودن، متن ارتفاعی را اشغال می‌کند و بر عناصر مجاور تأثیر می‌گذارد. بنابراین، متن خروجی همچنان باید به یک عنصر بلوک تبدیل شود و روی ارتفاع صفر تنظیم شود.

از آنجا که متن تولید شده توسط شبه عنصر :after بعد از عنصر می آید، به راحتی جایگزین ساختار می شود.

. همانطور که در مثال 3.30 نشان داده شده است، فقط باید کلاس clearleft را اضافه کنید.

مثال 3.30. شبه عنصر: بعد

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

بازدید وینی پو از خرگوش

مرورگر اینترنت اکسپلورر : بعد از نسخه 7.0 را پشتیبانی نمی کند، بنابراین مثال بالا در این نسخه ها کار نخواهد کرد. افزودن بزرگنمایی: 1 به یک عنصر شناور، بسته بندی در IE را لغو می کند.

راحتی روش فوق در استفاده از کلاس clearleft نهفته است که در صورت لزوم می توان آن را به هر تگ اضافه کرد. شما همچنین می توانید کلاس های اضافی را معرفی کنید که سبک آنها با مقادیر واضح دیگر متفاوت است.

نحوه پیچیدن متن دور یک تصویر در HTML و CSS - امتیاز 4.4 از 5 بر اساس 16 رای

امروزه تقریباً در همه جای اینترنت از تصاویر استفاده می شود. تصور یک صفحه وب بدون تصویر غیرممکن است. تصاویر جلب توجه می کنند، ظاهر و درک متن را بهبود می بخشند. بنابراین، در این درس نحوه قرار دادن تصاویر را در رابطه با متن و نحوه قرار دادن متن در اطراف یک تصویر در HTML و همچنین استفاده از خواص و مقادیر CSS را یاد خواهیم گرفت.

پیچیدن متن دور یک تصویر با استفاده از HTML

ساده ترین راه برای قرار دادن تصویر در صفحه استفاده از ابزارهای HTML است. اما این روش در مقایسه با قابلیت‌های CSS یک اشکال دارد: به شما اجازه نمی‌دهد بین تصویر و متن حاشیه تعیین کنید، بلکه فقط می‌توانید متن را در اطراف تصویر جریان دهید.

بیایید همه چیز را به ترتیب نگاه کنیم. برای درج یک عکس در صفحه HTML، از تگ img استفاده کنید؛ برای جزئیات بیشتر، به درس نحوه درج تصاویر در HTML مراجعه کنید. بنابراین برای درج یک عکس در متن یک صفحه HTML کافی است موارد زیر را در کد بنویسید:

جایی که foto.jpg مسیر نسبی تصویر است..jpg

تگ img یک ویژگی align دارد که تعیین می‌کند تصویر روی کدام لبه قرار می‌گیرد و متن در اطراف آن جریان می‌یابد (مثلا align="left" در امتداد لبه سمت چپ). صفت align معانی زیر را دارد:

• سمت چپ - تصویر در لبه سمت چپ قرار می گیرد و متن در اطراف آن به سمت راست جریان می یابد.
• سمت راست - تصویر در سمت راست قرار می گیرد و متن در سمت چپ در اطراف آن جریان می یابد.
• پایین - مسئول تراز عمودی است، در حالی که تصویر در سمت چپ خواهد بود، و پایین تصویر در مقابل خط اول متن قرار خواهد گرفت، این مقدار به طور پیش فرض تنظیم شده است.
• بالا - مانند مقدار قبلی، فقط خط متن در امتداد مرز بالای تصویر قرار خواهد گرفت.
• Middle - با این مقدار، وسط تصویر با خط پایه خط تراز می شود.

حالا بیایید به هر عنصر در عمل نگاه کنیم.

1. همانطور که قبلاً اشاره کردم، به طور پیش فرض تصویر روی bootom تنظیم شده است، یعنی صرف نظر از اینکه آن را تنظیم کنیم یا نه، عکس ما در رابطه با متن به این صورت قرار می گیرد:

2. برای تراز کردن تصویر به سمت چپ، و جریان متن در اطراف آن به سمت راست، باید موارد زیر را بنویسید:

3. برای تراز کردن تصویر به سمت راست، باید بر این اساس بنویسید:

4. حالا بیایید به تراز عمودی نگاه کنیم. اگر مقدار بالایی را اعمال کنید، اولین خط متن در مقابل حاشیه بالای تصویر قرار می گیرد.

5. متن را در مرکز تصویر تراز کنید. اگر نیاز به قرار دادن یک عکس کوچک در مرکز خط دارید، از این تکنیک بسیار خوب است.

با استفاده از خصوصیات CSS، متن را دور یک تصویر بپیچید

در واقع، آن نمونه‌هایی از ایجاد بسته‌بندی متن و موقعیت‌یابی تصویر که در بالا به آن پرداختیم، کمی قدیمی هستند؛ اکنون مرسوم است که همه عناصر را با استفاده از ویژگی‌ها و مقادیر CSS مسئول ظاهر صفحه می‌دانیم.

بیایید به یک مثال ساده از نحوه پیچیدن متن به دور یک عکس نگاه کنیم، زمانی که تصویر در لبه سمت چپ قرار دارد و متن در سمت راست در اطراف آن جریان دارد. در عین حال، تورفتگی های خاصی را بین متن و تصویر قرار می دهیم.

ابتدا باید کلاس خاصی را به تصویر خود اختصاص دهیم، در اینجا می توانید از هر کلمه ای استفاده کنید، نکته اصلی این است که دقیقاً متوجه شوید که این کلاس در طراحی صفحه شما چه مسئولیتی دارد. این کار به این صورت انجام می شود:

اکنون به کلاس leftfoto باید چند سبک CSS داده شود.

عکس چپ ( شناور: چپ؛ حاشیه: 4 پیکسل 10 پیکسل 2 پیکسل 0 پیکسل؛ )

این کد بین تگ ها قرار می گیرد ...، محصور در برچسب هایا در یک شیوه نامه CSS خارجی قرار داده شده است.

بیایید به عناصری که در اینجا تنظیم کردیم نگاه کنیم:

• شناور به سمت چپ؛ - ما تصویر را در سمت چپ قرار دادیم و متن را در اطراف تصویر در سمت راست قرار دادیم، این در اصل همان ویژگی align="left" است.
• حاشیه: 4px 10px 2px 0px; - حاشیه های بیرونی را 4 پیکسل از بالا، 10 پیکسل از سمت راست، 2 پیکسل از پایین و 0 پیکسل از سمت چپ تصویر قرار می دهیم.

استفاده از تصاویر در یک صفحه html در مقایسه با متن جامد همیشه آموزنده تر و بصری تر است.

درج یک عکس در متن html به روش های مختلفی امکان پذیر است و در کلاسیک این روش ها 3 مورد وجود دارد:

• وسط تصویر
• پیچیدن متن دور یک تصویر
• قرار دادن تصویر در یک فیلد

تراز کردن تصویر در مرکز

برای تراز کردن یک تصویر در مرکز یک ستون متنی، ساده ترین راه استفاده از تگ است در ظرف قرار دهید

که مشخصه align="center" برای آن تنظیم شده است. اگر انتظار دارید که اغلب از تصاویر استفاده کنید، بهتر است از سبک CSS برای تگ استفاده کنید

نحوه اجرای این کار، به مثال 1 مراجعه کنید.

مثال 1: تراز کردن یک تصویر در مرکز

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<html > <سر > <متا http-equiv = محتوای "Content-Type" = "text/html; charset=utf-8" > <عنوان >طراحی وسط</title> <نوع سبک = "text/css" > </style> </head> <بدن > <p class = "cimg" > <img src = "images/sample.gif" عرض = "200" ارتفاع = "100" alt = "Illustration" > !} </p> </body> </html>

در این مثال، به ظرف

ما یک cimg کلاس CSS را اضافه می کنیم که تراز را در مرکز خط تنظیم می کند. این که چگونه به صورت شماتیک به نظر می رسد در شکل 1 نشان داده شده است.

برنج. 1. طراحی در مرکز ستون متن

پیچیدن متن دور یک تصویر

قرار دادن متن در اطراف یک تصویر یکی از متداول ترین روش های چیدمان صفحه HTML است که به شما امکان می دهد به طور موثر از تمام فضای موجود استفاده کنید. تکنیک های رایج برای چیدمان صفحات وب، زمانی که تصویر در امتداد لبه پنجره مرورگر قرار دارد و متن در طرف دیگر آن را دور می زند (شکل 2). برای سفارشی کردن بسته بندی متن در اطراف یک تصویر، می توانید از چندین روش مبتنی بر HTML و CSS استفاده کنید.

برنج. 2. تصویر در لبه سمت چپ صفحه تراز شده است و در سمت راست با متن احاطه شده است.

برای قرار دادن متن در اطراف یک تصویر با استفاده از HTML، باید آن تگ را به خاطر بسپارید یک ویژگی align وجود دارد که تراز تصویر را در سند تعیین می کند و در عین حال مشخص می کند که چگونه متن در اطراف تصویر قرار می گیرد. برای تراز کردن تصویر به سمت راست و تنظیم متن به سمت چپ، باید از align="right"، برای تراز کردن به سمت چپ و پیچیدن متن به سمت راست، از align="left" استفاده کنید. استفاده از ویژگی های برچسب در اینجا نیز مفید است - vspace و hspace که نشان می دهد متن در چه فاصله ای به صورت عمودی و افقی در اطراف تصویر جریان دارد. بدون مشخص کردن این ویژگی ها، متن نزدیک به تصویر خواهد بود (مثال 2).

مثال 2: متن را با استفاده از HTML دور یک تصویر بپیچید

1 2 3 4 5 6 7 8 9 10 11 12 13

<html > <سر > <متا http-equiv = محتوای "Content-Type" = "text/html; charset=utf-8" > <عنوان >طراحی در متن</title> </head> <بدن > <p> <img src = "images/sample.gif" عرض = "100" ارتفاع = "200" alt = "Illustration" align = "left" vspace = "5" hspace = "5" > !} </p> </body> </html>

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

برای پیکربندی بسته بندی تصویر با استفاده از سبک های CSS، از قانون float استفاده می کنیم. float:right تصویر را در لبه سمت راست سند تراز می کند و متن را در سمت چپ قرار می دهد، در حالی که float:left تصویر را در لبه سمت چپ سند تراز می کند و متن را در سمت راست تصویر قرار می دهد (مثال 3).

مثال 3: متن را با استفاده از CSS دور یک تصویر بپیچید

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<html > <سر > <متا http-equiv = محتوای "Content-Type" = "text/html; charset=utf-8" > <عنوان >طراحی در متن</title> <نوع سبک = "text/css" > </style> </head> <بدن > <p> <img src = "images/sample.gif" عرض = "100" ارتفاع = "200" alt = "Illustration" class = "cimg" > !} Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>

Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

اینجا برای تگ کردن کلاس cimg اضافه می شود که دارای تراز سمت راست روی float:right است، و بسته بندی سمت چپ و پایین تصویر با ویژگی های padding-left:10px و padding-bottom:10px تنظیم می شود.

تصویر در زمین

با این فرمت برای قرار دادن یک تصویر در یک سند، تصویر تنها در یک طرف جریان دارد. این روش قرار دادن شبیه یک ساختار دو ستونی است که در آن یک تصویر در یک ستون و متن در ستون دوم قرار می گیرد.

با این طرح، تصویر در سمت راست یا چپ متن قرار می گیرد و فقط در یک طرف به اطراف می چرخد. در واقع شبیه دو ستون است که یکی از آنها شامل یک نقاشی و دیگری حاوی متن است (شکل 3).

برنج. 3. تصویر را در قسمت سمت چپ متن قرار دهید

من دو راه برای ایجاد یک ساختار مشابه می دانم - با استفاده از تگ های HTML

و با استفاده از قانون حاشیه CSS. این دو روش را در نظر بگیرید:

جداول: این روش راحت است زیرا به شما امکان می دهد به راحتی و به وضوح یک ساختار ستونی را با استفاده از سلول ها سازماندهی کنید. این روش قدیمی است و استفاده از آن در طراحی وب مدرن چندان مورد استقبال قرار نمی گیرد. اعتقاد بر این است که این روش اضافی است و ویرایش آن دشوار است. اما همه تازه واردها از آن عبور می کنند. برای چنین ساختاری، به جدولی با سه ستون نیاز داریم، ستون اول شامل خود تصویر، سوم شامل متن است، و بین آنها تورفتگی را نشان می دهیم - در ستون دوم. شما می توانید با دو ستون به نتیجه برسید و با استفاده از سبک های CSS یا با استفاده از ویژگی عرض تگ، تورفتگی را مشخص کنید (مثال 4).

مثال 4: قرار دادن یک تصویر در یک فیلد با استفاده از جداول

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<html > <سر > <متا http-equiv = محتوای "Content-Type" = "text/html; charset=utf-8" > <عنوان >نقاشی در زمین</title> <نوع سبک = "text/css" > </style> </head> <بدن > <عرض جدول = "100%" فاصله سلولی = "0" cellpadding = "0" > <tr > <td class = "leftcol" > <> </td> <td valign = "بالا" > </td> </tr> </جدول> </body> </html>

جوجه تیغی ها توسط یک پوسته خاردار از تهاجم خارجی محافظت می شوند، که آنها را از کسانی که می خواهند از گوشت خوشمزه و لطیف جوجه تیغی سود ببرند، نجات می دهد. اما این حیوان را نباید کاملاً بی ضرر دانست؛ بالاخره یک شکارچی است. بله، او از گرگ ها و روباه ها تغذیه نمی کند، اما فقط به این دلیل که از نظر اندازه از آنها پایین تر است. اما او کاملاً قادر به خوردن یک کرم یا حتی یک مار است.

نتیجه در شکل 4 نشان داده شده است.

برنج. 4. تصویر در فیلد سمت چپ متن

در مثال 4، عرض تصویر 90 پیکسل و عرض ستونی که در آن قرار دارد، 110 پیکسل است. تفاوت بین آنها تورفتگی لازم را از متن به تصویر برای ما فراهم می کند. برای جلوگیری از تداخل ویژگی‌های جدول سلولی و cellpadding در فرآیند، بهتر است مقادیر آنها را صفر کنید. لطفاً توجه داشته باشید که تراز ارتفاع سلول ها به صورت عمودی-تراز: بالا است.

سبک های CSS: این مثال ارجح تر و بهینه تر است. در اینجا به دو لایه نیاز داریم

، که پارامترهای آن را از طریق CSS مشخص خواهیم کرد. یک لایه حاوی تصویر و لایه دیگر حاوی متن است. چگونه این کار می کند، به مثال 5 مراجعه کنید:

مثال 5. قرار دادن یک تصویر در یک فیلد با لایه ها و سبک های CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<کد > <html > <سر > <متا http-equiv = محتوای "Content-Type" = "text/html; charset=utf-8" > <عنوان >نقاشی در زمین</title> <نوع سبک = "text/css" > </style> </head> <بدن > <div id = "pic" > <img src = "images/igels.png" عرض = "90" ارتفاع = "78" alt = "باور نمی کنی، اما جوجه تیغی است"> </div> <div id = "متن" >جوجه تیغی ها توسط یک پوسته خاردار از تهاجم خارجی محافظت می شوند، که آنها را از کسانی که می خواهند از گوشت خوشمزه و لطیف جوجه تیغی سود ببرند، نجات می دهد. اما این حیوان را نباید کاملاً بی ضرر دانست؛ بالاخره یک شکارچی است. بله، او از گرگ ها و روباه ها تغذیه نمی کند، اما فقط به این دلیل که از نظر اندازه از آنها پایین تر است. اما او کاملاً قادر به خوردن یک کرم یا حتی یک مار است.</div> </body> </html>

جوجه تیغی ها توسط یک پوسته خاردار از تهاجم خارجی محافظت می شوند، که آنها را از کسانی که می خواهند از گوشت خوشمزه و لطیف جوجه تیغی سود ببرند، نجات می دهد. اما این حیوان را نباید کاملاً بی ضرر دانست؛ بالاخره یک شکارچی است. بله، او از گرگ ها و روباه ها تغذیه نمی کند، اما فقط به این دلیل که از نظر اندازه از آنها پایین تر است. اما او کاملاً قادر به خوردن یک کرم یا حتی یک مار است.

ویژگی float:left برای لایه #pic مورد نیاز است تا تصویر را در کنار لبه سمت چپ سند قرار دهید و خط بالای متن با خط بالایی تصویر منطبق باشد. بدون این ویژگی، لایه #متن تا ارتفاع تصویر پایین می‌آید. همچنین برای لایه #text، حاشیه سمت چپ margin-left:110px را با فاصله 110 پیکسل مشخص کنید تا متن آنجا روی تصویر همپوشانی نداشته باشد. اگر تصویر باید در حاشیه سمت راست قرار گیرد، float:right را برای #pic و margin-right:110px را برای #text مشخص کنید.

P.S.: طبق مشخصات HTML4، تصاویر باید در عناصر بلوک مانند div یا p قرار بگیرند.

بهترین مقالات در این زمینه

کپی کردن فایل ها و پوشه ها

روش های مختلف برای اجرای Command Prompt به عنوان Administrator در ویندوز

دستور RUNAS - اجرای یک برنامه به عنوان کاربر دیگر ویندوز