مدیریت محتوای طولانی و غیرمنتظره توسط CSS - قسمت آخر

- visibility ۲ mode_comment

همونطور که اطلاع دارید در جلسه قبل یک مثال رو با هم بررسی کردیم و مشکل برچسب طولانی مقالات رو با استفاده از ویژگی min-width و قرار دادن مقدار auto برای height، برطرف کردیم. در این جلسه میخوایم مثال دیگه ای رو با هم بررسی کنیم و روش حل اون رو یاد بگیریم.

مثال 4 : بخش header به همراه لینک

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

کدهای CSS:

میبینید که یک عرض حداکثر برابر با 300 پیکسل برای header قرار دادیم و موقعیت اون رو relative کردیم تا بتونیم فرزندان اون رو نسبت به اون جابجا کنیم. برای لینک مورد نظر از موقعیت دهی Absolute استفاده کردیم و فاصله اون از سمت راست و بالا رو مشخص کردیم. خب با اینکار خروجی بصورت زیر میشه:میبینید بدلیل اینکه متن مورد نظر خیلی طولانی نیست، مشکل خاصی وجود نداره و به خوبی نمایش داده میشه. حالا فرض کنید که متن ما طولانی تر بشه. خروجی شبیه به تصویر زیر میشه:میبینید زمانی که عرض هدر تغییر میکنه، متن و لینک با هم تداخل پیدا میکنن و حالت بدی رو به وجود میارن. در این مواقع برای حل مشکل میتونیم به راحتی از flexbox کمک بگیریم و مشکلمون رو حل کنیم. برای اینکار کد CSS رو بصورت زیر تغییر میدیم:

میبینید که دیگه خبری از موقعیت دهی مطلق نیست و با استفاده از flexbox به راحتی انعطاف رو به قالبمون میدیم. میبینید که برای header ویژگی display رو برابر با flex قرار دادیم و بعد از اون flex-wrap رو برابر با wrap قرار دادیم. همونطور که میدونید مقدار پیش فرض این ویژگی nowrap هست و باعث میشه که المنتها در یک ردیف بمونن و به خط بعدی نرن. اما زمانی که از Wrap استفاده میکنید، زمانی که عرض کم میشه و المنتها جایی ندارن، مجبور میشن که به ردیف بعدی برن. ویژگی justify-content رو نیز برابر با space-between قرار دادیم تا متن و لینک در دو سمت هدر قرار بگیرن و فضای خالی بین اونا واقع بشه. با استفاده از align-item هم اونا رو از نظر عمودی در وسط قرار دادیم. در نهایت برای اینکه لینک مورد نظر قبل از اینکه کاملا به متن برخورد کنه به خط بعد منتقل بشه، از margin-right استفاده کردیم و مقداری رو برای اون در نظر گرفتیم. با اینکار خروجی بصورت زیر میشه:

میبنید زمانی که فضای کافی وجود نداره، لینک به خط بعدی منتقل میشه. این تکنیک Alignment Shifting Wrapping نام داره و میتونین در این لینک بیشتر در مورد اون مطالعه کنید. به همین راحتی.

امیدوارم از این مطالب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
ووکامرس

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

محمد اسفندیاری

خواهش میکنم دوست عزیز
سعی میکنیم این کار رو انجام بدیم
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.