راه های لغو float در HTML. نحوه پیچیدن متن دور یک عکس

اغلب اوقات، به طراح چیدمان وظایف غیر استاندارد خاصی داده می شود. هدف ما ارائه منطقی ترین و صحیح ترین راه حل است. امروز در مورد ویژگی های پیچیدن متن به دور یک تصویر صحبت خواهیم کرد.

فرمول بندی مسئله

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

بیایید موردی را در نظر بگیریم که بسته بندی متن مورد نیاز نیست. علاوه بر این، من یک گزینه جهانی ارائه می دهم - در صورت عدم وجود تصویر، متن در سراسر عرض بلوک کشیده می شود (همه مقالات شما با تصاویر همراه نیستند). عرض بلوک متن به شدت ثابت نیست. در زیر بلوک ما باید شبیه باشد.

راه حل صحیح

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

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >بلوک متن

نمایشگر: درون خطی )

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

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

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

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

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

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

تصویر ( شناور: چپ؛ /*wrap */ حاشیه: 10px; /*بالشتک خارجی برای زیبایی */صفحه نمایش: درون خطی; /* برای IE6، به طوری که حاشیه سمت چپ دو برابر نشود */) . متن (سرریز: پنهان؛ شناور: چپ؛ )

معایب روش و جایگزین

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

در این مورد، شما به یک جایگزین برای پیکربندی قالب مورد نظر نیاز دارید. این تکنیک بر اساس عملکرد ترکیب خواهد بود نمایش: جدول-سلول;. این راه حل به همان اندازه موثر است، اما از نظر سادگی نسبت به روش اول کمی پایین تر است. هنگام فراخوانی این روش، همچنین باید چیدمان را طوری تنظیم کنید که در محیط اینترنت اکسپلورر کار کند

img ( شناور: سمت چپ؛ /* بسته بندی را تنظیم کنید */حاشیه: 10 پیکسل /* تورفتگی برای زیبایی */صفحه نمایش: درون خطی; /* برای IE6، به طوری که حاشیه سمت چپ دو برابر نشود */) . متن (نمایش: سلول جدول؛ بزرگنمایی: 1 ; /* با دقت! رشته نامعتبر است */ }

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

در چه مرورگرهایی کار می کند؟

تمام عناصر HTML در یک صفحه وب در یک جریان مشترک، از بالا به پایین (برای عناصر بلوک) و از چپ به راست (برای عناصر درون خطی) مرتب شده اند. این روش نمایش خیلی موثر نیست، اما به لطف CSS امکان تغییر طراحی برای بهتر شدن وجود دارد.

عناصر شناور

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

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

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

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

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

نکته: عناصر دارای موقعیت مطلق و ثابت ویژگی float را نادیده می گیرند.

با استفاده از ویژگی CSS float، تصویر در سمت چپ شناور شد. متنی که در کد HTML زیر تصویر قرار دارد، در امتداد سمت راست و پایین تصویر را می‌پیچد.

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

Img ( شناور: چپ؛ حاشیه: 0 10 پیکسل 10 پیکسل 0؛ ) امتحان کنید »

لغو Wrap

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

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

• سمت چپ - عناصر شناور در سمت چپ مجاز نیستند.
• سمت راست - عناصر شناور در سمت راست مجاز نیستند.
• هر دو - عناصر شناور در هر دو طرف ممنوع هستند.
• هیچ - اجازه می دهد تا عناصر شناور در هر دو طرف.

ویژگی clear مشخص می کند که عناصر شناور در سمت راست مجاز نیستند. متنی که در زیر تصویر قرار دارد در لبه سمت چپ تصویر قرار نمی گیرد.

در این مقاله به گزینه هایی برای پیچیدن متن در اطراف یک عکس می پردازیم. راه های مختلفی وجود دارد. بیایید به هر یک از آنها نگاه کنیم. برای شروع به شما توصیه می کنم تگ 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; // تراز سمت راستشناور به سمت چپ؛ // تراز چپ

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

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

وظیفه

یک تصویر به صفحه اضافه کنید تا دور متن مجاور پیچیده شود.

راه حل

قرار دادن متن در اطراف یک تصویر معمولاً برای چیدمان فشرده مطالب و پیوند دادن تصاویر و متن به یکدیگر استفاده می شود. خود float با استفاده از ویژگی float style اضافه شده به انتخابگر IMG ایجاد می شود. مقدار سمت چپ تصویر را به سمت چپ، راست - به راست تراز می کند. در این مورد، جریان در امتداد طرف های آزاد دیگر رخ می دهد.

مثال 1. پیچیدن دور تصاویر

HTML5 CSS 2.1 IE Cr Op Sa Fx

گزارش ستوان بوکاتیوف

روز گذشته گروه ما طی یک عملیات شناسایی مورد حمله دشمن ناشناس با لباس استتار بیگانگان قرار گرفت. در نتیجه دفاع مؤثر و ضد حمله سریع، گروه بزرگی از شبه نظامیان سرکوب و به عقب پرتاب شدند. هیچ تلفات جانی در بین پرسنل وجود ندارد. رزمندگان گروه شناسایی مهارت های قابل توجهی در استفاده از سلاح از خود نشان دادند. به ویژه در جنگ ممتاز رهبر دسته M.A. Kudryashev بود که عاقلانه از منابع انسانی جوخه خود استفاده کرد. در نتیجه این عملیات عناصر فرهنگ فرازمینی دستگیر و به گروه تحلیلی منتقل شدند.

اطلاعیه گروه تحلیلی

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

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

برنج. 1. متن با تصاویر

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

آخرین به روز رسانی: 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؛ واضح: هر دو؛ )

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