رفتن به مطلب
parniann

بررسی قوانین موقعیت عناصر float شده

پست های پیشنهاد شده

اکنون می‌دانیم که float چیست و یک عنصر float شده در کنار عناصر دیگر قرار می‌گیرد. مورد دیگری وجود دارد که درک آن در ابتدا برای برنامه نویسان کمی مشکل به نظر می‌رسد و آن قوانین حاکم بر روی عناصر float شده است.

در مواردی می‌خواهیم به عناصر یک لیست float اختصاص دهیم. به عنوان مثال یک لیست تصویری که ممکن است به عنوان گالری استفاده شود را در نظر بگیرید.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]

    [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=1

    [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=2
  • [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=3
  • [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=4
  • [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=5
  • [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=6
  • [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

  • 100x100&text=7
  • [/TD]

    [/TR]

    [/TABLE]

     

    [TABLE]

    [TR]

    [TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

 

 

به صورت پیش فرض عناصر li لیست به صورت block level هستند و هر کدام در خطی جدید و در واقع کل لیست به صورت یک پشته نمایش داده می‌شود. برای تغییر این حالت می‌توان با float کردن عناصر li آنها را از حالت پشته خارج کرد. نکته‌ای قابل توجه نحوه نمایش چندین عنصر float شده در کنار یکدیگر است.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]li{

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] float: right;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] margin: 5px;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

در این مواقع عناصر float شده به ترتیب اولویت مکانی خود در سمت مشخص شده شناور می‌شود. اگر ارتفاع این لیست ها یکسان باشد به صورت تمیز و زیبا نمایش داده می‌شود.

محتوای مخفی

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

اما در اینجا عناصر لیست ما دارای ارتفاع یکسانی نیستند. ارتفاع بعضی ار تصاویر ۱۰۰px و بعضی دیگر ۱۵۰px است در این موارد نتیجه به صورت عجیبی به نمایش در می‌آید.

محتوای مخفی

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

اولین باری که با این صحنه مواجه شدم خیلی تعجب کردم! چه اتفاقی در این مدل می‌افتد؟ چرا عنصر شماره چهار در پایین عنصر شماره ۱ قرار می‌گید اما چنین اتفاقی برای ۵ نمی‌افتد و در آن موقعیت اشتباه به نمایش در می‌آید. اگر خصوصیت float عنصر li را حذف و نحوه نمایش آن را به inline تغییر دهید نتیجه کاملا متفاوت خواهد شد.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]li {

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] display: inline;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

محتوای مخفی

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

[h=3]پاکسازی float[/h] float برای ساختن طرح‌های مختلف و زیبا از جمله طرح‌های چند ستونی خطی مناسب است اما زمانی که به عنصری float تخصیص می‌دهید دیگر عناصر نیز تحت تاثیر این عنصر قرار می‌گیرد. برای نمونه می‌خواهیم یک پاراگراف را بعد از لیست float شده قرار دهیم.

محتوای مخفی

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

نتیجه خارج از انتظار شما خواهد بود:

محتوای مخفی

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

برای رهایی از مشکل بالا می‌توان از خصوصیت clear استفاده کرد. این خصوصیت مقدار جهتی را دریافت می‌کند که بر اساس آن از قرار گرفتن عناصر float شده در آن جهت جلوگیری می‌کند. برای مثال اگر در لیست بخواهیم قبل از li شماره ۲ عنصر float شده‌ای باشد می‌توان clear آن را با right مقدار دهی کرد.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]ul li:nth-child(2) {

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] clear: left;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

محتوای مخفی

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

این کد به مرورگر اعلام می‌کند که قبل از عنصر مشخص شده عنصر float شده‌ای وجود نداشته باشد و آن عنصر به عنوان اولین عنصر float شده در آن خط باشد.

حال اگر دوباره پاراگراف را بعد از لیست قرار دهیم دوباره همان مشکل را داریم! پس نتیجه میگیرم که اینجا مشکل ما با لیست نیست بلکه با پاراگراف است.

محتوای مخفی

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

برای رهایی از این مشکل می‌توان خصوصیت clear پاراگراف را با both مقدار دهی کرد تا از قرار گرفتن هرگونه عنصر float در هر دو سمت چپ و راست جلوگیری کرد و در واقع پاراگراف را به صورت block level نمایش داد.

محتوای مخفی

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

[h=3]خاصیت float و ارتفاع عناصر[/h] زمانی که یک لیست تنها حاوی عناصر float شده باشد آنگاه ارتفاع والد آنها جمع می‌شود! برای مثال می‌خواهیم رنگ زمینه‌ای به لیستی که در مثال‌های قبلی استفاده کردیم، اختصاص دهیم. اگر عناصر درون لیست float نشده باشند تنها کافی است که یک رنگ زمینه بوسیله CSS برای آن لیست تعریف کنیم.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]ul {

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] background-color: gray;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

محتوای مخفی

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

اما اگر لیست ما تنها حاوی عناصر float شده باشد آنگاه ارتفاع ul جمع می‌شود و خروجی به شکل زیر یعنی بدون رنگ زمینه می‌شود. رنگ زمینه کجاست!؟

محتوای مخفی

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

روش‌های مختلفی برای این مشکل وجود دارد که ساده ترین آن اختصاص ارتفاع به ul است.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]ul {

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] height:220px;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] background-color: gray;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

محتوای مخفی

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

همانطور که می‌بینید با اینکار رنگ زمینه نمایان می‌شود. اما از این راه حل همیشه نمی‌توان استفاده کرد. اگر ارتفاع عناصر همیشه ثابت نباشد نمی‌توان از این راه حل استفاده کرد. در ادامه راه حل‌های بهتری را بررسی می‌کنیم.

[h=3]راه حل‌های مشکل ارتفاع و clearfix[/h] در این مواقع کلمه clearfix برای همه نجات دهنده است. clearfix در واقع یک گزینشگر کلاسی CSS است که در آن خصوصیت clear با both مقدار دهی شده و در html زمانی که می‌خواهیم از مشکل ارتفاع رهایی یابیم یک تگ (معمولا div) خالی با خصوصیت کلاس clearfix قرار می‌دهیم.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content].clearfix {

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] clear: both;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

محتوای مخفی

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

این روش بدون هیچ مشکلی کار می‌کند اما در این روش همیشه یک تگ اضافی در HTML قرار می‌گیرد که منطقی نیست. راه حل جدیدتر استفاده از خصوصیت overflow برای لیست است.

[TABLE]

[TR]

[TD=class: content]

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]ul {

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content] overflow: auto;

[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: content]}

[/TD]

[/TR]

[/TABLE]

 

 

 

محتوای مخفی

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

به اشتراک گذاری این ارسال


لینک به ارسال

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • جدید...