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



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه قبل یک مثال رو با هم بررسی کردیم و مشکلی که Placeholder بر روی Button قرار میگرفت رو با استفاده از position: relative برطرف کردیم. در این جلسه میخوایم مثال دیگه ای رو با هم بررسی کنیم و روش حل اون رو یاد بگیریم.

مثال 3 : حل کردن مشکل نامهای طولانی

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

کدهای CSS:

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

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

میبینید که کد مربوط به float: left رو کامنت کردیم. با اینکار خروجی بصورت زیر میشه:

میبینید که ظاهر بهتر شده. اما اگر نام طولانی تری رو قرار بدیم، مشکل زیر به وجود میاد:

میبینید که در این هم مشکل به وجود اومده. برای اینکار میتونیم ویژگی overflow: hidden رو به بخش مربوط به نام نویسنده اضافه کنیم تا اضافات اون نمایش داده نشه و به خط بعدی نرود. کدهای CSS بصورت زیر میشه:

با اینکار خروجی بصورت زیر میشه:

میبینید که اضافه های متن دیگه نمایش داده نمیشن ولی در عوض رابط کاربری تر و تمیزتری داریم. یک راه دیگه که میتونیم از اون استفاده کنیم، flexbox هست. برای اینکار به اون المنتی که هم تصویر و هم نام نویسنده رو در خودش احاطه کرده، ویژگی display: flex رو اضافه میکنیم. کد CSS بصورت زیر میشه:

به همین راحتی. با اینکار خروجی بصورت زیر میشه:

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

در جلسه بعد با ادامه آموزش در خدمتتون هستیم و مثالها و مشکلات دیگه رو بررسی میکنیم.

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

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

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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