رفتن به مطلب
اطلاعیه مهم: پایان فعالیت انجمن پس از 15 سال ×
اطلاعیه مهم: پایان فعالیت انجمن پس از 15 سال

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

parniann

توسط parniann،
در CSS

ارسال های توصیه شده

parniann    110

parniann
ارسال شده در

اکنون می‌دانیم که 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]

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • Like 1
لینک به دیدگاه
رفتن به فهرست موضوع ها
×
×
  • اضافه کردن...