القيمة fit-content لا تعمل

Ahmed Gamal58 · 9 فبراير 2021

السلام عليكم و رحمة الله و بركاته
لا استطيع تحديد خطائى هنا و بالتالى الخاصية width:fit-content;
لا تعمل ممكن اعرف ما السبب و لكم جزيل الشكر

عبدالباسط ابراهيم · 9 فبراير 2021

ربما تحتاج لإضافة الprefix الخاص بالمتصفح الذي تستعمله حيث تعمل هذه ال prefix على زيادة دعم المتصفحات ل خواص ال css الجديدة

إذا كان

جوجل كروم إستخدم webkit
فايرفوكس إستخدم moz

أيضا قم بإضافة خاصية ال css بدون ال prefix

width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;

يمكنك إضافة هذه ال prefixes بدون تدخل منك عن طريق npm package يمكنك القراءة عنها

تم التعديل في 9 فبراير 2021 بواسطة عبدالباسط ابراهيم

سمير عبود · 9 فبراير 2021

fit-content تسمح للعُنصر بإستعمال المساحة المُتاحة له بدون تجاوز المساحة الأعظمية، يستخدم العُنصر هذه المساحة على حسب المُحتوى الخاص به.

لنأخذ المثال التالي:

حاوية (section) به 3 اقسام (div) نعطي للحاوية عرض ثابت 700px و نعطي للأقسام القيمة fit-content للعرض بهذا الشكل:

<section>
  <div class="fit-red">Ahmed</div>
  <div class="fit-red">Ahmed gamal</div>
  <div class="fit-red">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sapiente molestias quia aperiam quas
    voluptatem, sit fugiat suscipit dolorum? Modi saepe nulla natus architecto porro sunt unde suscipit! Autem,
    facilis?
  </div>
</section>

و التنسيقات التالية:

section{
  width: 700px;
}

.fit-red{
  background-color: red;
  padding: 5px 20px;
  margin-bottom: 20px;
  width: fit-content;
}

ستجد أن الdiv الأول والثاني أخذ مساحة على حسب المُحتوى و لو أضفت مُحتوى آخر سيتمدد لكن لن يتجاوز 700px و هذا ما يوضحه الdiv الثالث بالرغم من أن هناك محتوى لكن لم يتجاوز المساحة الأعظمية.

رُبما هناك تنسيقات لديها أولوية عندك تمنع من تطبيق التنسيقات الأخرى. لأنها مشطوبة أي أن العناصر لديك تأخذ تنسيق آخر في الخاصية width.

Ahmed Gamal58 · 9 فبراير 2021

بتاريخ 16 دقائق مضت قال عبدالباسط ابراهيم:
ربما تحتاج لأضافة الprefix الخاص بالمتصفح الذي تستعمله حيث تعمل هذه ال prefix على زيادة دعم المتصفحات ل خواص ال css الجديدة

إذا كان

جوجل كروم إستخدم webkit

فايرفوكس إستخدم moz

أيضا قم بإضافة خاصية ال css بدون ال prefix
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
يمكنك إضافة هذه ال prefixes بدون تدخل منك عن طريق npm package يمكنك القراءة عنها

شكرآ لحضرتك يا بشمهندس

Salah Eddin Beriani2 · 9 فبراير 2021

الامر غريب ويمكن ان يكون راجع لعوامل كثيرة وللتاكد جرب في ملف html خارجي بسيط الكود التالي

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="item">lorem</div>
    <div class="item">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non sequi ut incidunt, doloremque
      dolores voluptatibus eaque ex sint numquam pariatur corrupti facilis error veritatis aperiam,
      consequatur, expedita aspernatur quae aliquam!
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. In enim modi, aut facere beatae
      sapiente, voluptatum perspiciatis neque dolor cumque quis expedita aliquid alias odit
      veritatis animi numquam nesciunt suscipit? Accusantium officiis quod aliquam in harum, aliquid
      rerum hic tempore voluptas! Deleniti voluptatem rerum illum magni totam, quae accusamus eaque
      explicabo sint dignissimos repellat, non quasi, iste pariatur. Alias, modi! Necessitatibus
      ipsam delectus amet impedit accusamus, quae autem repellat, eligendi, eum itaque nostrum!
      Libero fugiat ullam esse ut ratione. Adipisci at quae, ratione provident expedita cum harum
      reprehenderit itaque. Harum. Sed, accusantium deleniti voluptatum, corrupti dignissimos,
      ratione iusto dicta blanditiis nesciunt asperiores cupiditate neque provident eaque? Dolor,
      officia nostrum molestiae labore asperiores incidunt mollitia debitis molestias voluptatum
      cumque officiis iusto? Voluptate dolorem delectus officia nam beatae similique nulla dolores,
      repellendus nobis necessitatibus, maiores sint eaque amet harum cum enim veniam magni totam
      ipsa ipsum inventore! Ea, architecto. Assumenda, voluptatem veritatis. Laudantium qui in dicta
      aperiam maiores nemo fugit, praesentium soluta hic. Tempore cum sit voluptatem placeat
      exercitationem repudiandae corporis nisi aperiam aspernatur, quo reiciendis minus perspiciatis
      explicabo ut distinctio dolore. Totam vitae vero, nisi voluptas quibusdam modi, facere quae
      earum laborum necessitatibus deleniti aperiam ab, explicabo voluptate eaque consectetur
      impedit. Laboriosam explicabo rem maxime autem fuga consequuntur ea ut quae. Porro,
      blanditiis. Eveniet quae dolorem vel voluptate, doloremque repellat. Eum repellendus dolorem
      explicabo soluta labore magni sint commodi odio praesentium fugit totam, corrupti tenetur,
      optio similique qui assumenda amet debitis. Dignissimos sed, eum repudiandae, saepe iure ea
      facilis ad expedita ipsa quae nulla numquam culpa sapiente quibusdam fugit! Soluta dignissimos
      ratione ab. Molestias vitae quos aliquid commodi exercitationem beatae veritatis. Voluptate
      totam quam, ullam unde a earum? Voluptatibus, fuga nam consectetur dolore recusandae alias
      reprehenderit ipsa fugit facilis voluptatem natus laborum ratione ullam itaque. Sed dolores
      deleniti hic accusamus rerum?
    </div>
  </body>
</html>

.item {
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
  width: fit-content;
}

اذا لم تكن النتيجة كالصورة التي ارفقتها فحاول تحديث المتصفح واذا وجدت نتيجة بالمثال الذي ارفقته عندها يمكنك ان ترفع لنا ملف ال css في مشروعك لنلقي عليه نظرة

بالتوفيق

القيمة fit-content لا تعمل

السؤال

Ahmed Gamal58

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

سمير عبود

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Gamal58

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Salah Eddin Beriani2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية