كيفية جعل عرض الكتلة حسب المحتوى باستخدام كس / دليل تعليمي

أحد الأسئلة الأكثر شيوعا عند إنشاء صفحات الويب هو كيفية جعل عرض الكتلة حسب المحتوى? هناك عدة طرق في كس التي تسمح لك لتحقيق النتيجة المرجوة دون استخدام عرض ثابت. في هذا البرنامج التعليمي ، سنلقي نظرة على بعض الطرق البسيطة والفعالة.

واحدة من أبسط الطرق وأكثرها شيوعا لجعل عرض الكتلة حسب المحتوى هي استخدام خاصية العرض. إعداد العرض: مضمنة أو عرض: كتلة مضمنة لعنصر كتلة يسمح لها أن تأخذ فقط مساحة كبيرة حسب الضرورة لاستيعاب محتوياته. هذه الطريقة مفيدة بشكل خاص عندما تحتاج إلى وضع عدة كتل في صف واحد ، مع مراعاة حجم محتوياتها.

هناك طريقة أخرى لتحقيق عرض الكتلة حسب المحتوى وهي استخدام خاصية التعويم. وضع تعويم: اليسار أو تعويم: يسمح لك حق عنصر الكتلة بمحاذاة أحد جوانب الحاوية الأصلية. ونتيجة لذلك ، فإن كتلة تأخذ مساحة فقط بقدر ما هو ضروري لاستيعاب محتوياته. هذه الطريقة مفيدة بشكل خاص في الحالات التي تحتاج فيها إلى وضع الكتل جنبا إلى جنب ، في سطر واحد.

1. كيفية جعل عرض الكتلة حسب المحتوى باستخدام كس
2. طريقة استخدام العرض: كتلة مضمنة;
3. طريقة استخدام العرض: الجدول;
4. طريقة استخدام تخطيط الجدول: تلقائي;
5. طريقة استخدام العرض: فليكس;
6. ما هو عرض كتلة?
7. كيفية تغيير عرض كتلة حسب المحتوى
8. تطبيق خاصية العرض
9. أمثلة الاستخدام
10. سؤال وجواب
11. كيف يمكنني جعل عرض كتلة في المغلق?
12. كيف يمكنني جعل عرض كتلة من المحتوى باستخدام المغلق?
13. كيف يمكنني جعل عرض كتلة يساوي عرض محتوى النص?
14. هل هناك أي طرق أخرى لتعيين عرض الكتلة حسب المحتوى?
15. هل من الممكن تعيين عرض كتلة من المحتوى دون استخدام المغلق?

كيفية جعل عرض الكتلة حسب المحتوى باستخدام كس

غالبا ما يواجه مطورو الويب الحاجة إلى ضبط عرض الكتلة ، والذي سيتم ضبطه تلقائيا على محتواه. هناك عدة طرق لتحقيق هذا التأثير في كس. دعونا ننظر إلى بعض منهم.

طريقة استخدام العرض: كتلة مضمنة;

واحدة من أسهل الطرق هي استخدام العرض: خاصية الكتلة المضمنة ؛ للكتلة التي تريد أن تجعلها واسعة حسب المحتوى.

المحتوى الخاص بك هنا

المغلق:

.مضمنة كتلة العرض {

عرض: مضمنة كتلة;

}

في هذه الحالة ، سيتم توسيع الكتلة وتقلصها اعتمادا على طول محتواها. ومع ذلك ، تحتوي هذه الكتلة على ميزات عرض ، على سبيل المثال ، سيتم محاذاتها رأسيا.

طريقة استخدام العرض: الجدول;

طريقة أخرى هي استخدام العرض:الجدول ؛ خاصية الكتلة.

المحتوى الخاص بك هنا

المغلق:

.عرض الجدول {

عرض: الجدول;

العرض: تلقائي;

}

عند استخدام هذه الطريقة ، ستمتد الكتلة فوق المحتوى ، لكنها ستبقى عنصر كتلة ومحاذاة عموديا ، تماما مثل الكتلة العادية.

طريقة استخدام تخطيط الجدول: تلقائي;

إذا كنت تريد أن تقوم الكتلة بتعيين عرض المحتوى في الاتجاه الأفقي فقط ، فيمكنك استخدام تخطيط الجدول: تلقائي ؛ خاصية.

المحتوى الخاص بك هنا

المغلق:

.الجدول-تخطيط-العرض {

عرض: الجدول;

تخطيط الجدول: تلقائي;

}

ستعطي هذه الطريقة نفس النتيجة السابقة ، لكن الكتلة سيكون لها ارتفاع ثابت ، وسوف تمتد أفقيا فقط.

طريقة استخدام العرض: فليكس;

واحدة من الطرق الأكثر شعبية لإنشاء كتلة مع عرض المحتوى هو استخدام العرض: فليكس.

المحتوى الخاص بك هنا

المغلق:

.فليكس العرض {

1. عرض: فليكس;
2. العرض: صالح المحتوى;
3. }

ونتيجة لذلك ، فإن كتلة تمتد تلقائيا وتضييق على طول عرض المحتوى ، في حين تبقى عنصر كتلة.

في الختام ، يتم تزويدك بعدة طرق لجعل عرض الكتلة حسب المحتوى باستخدام كس. يعتمد اختيار الطريقة على تفاصيل مشروعك ومتطلبات التصميم.

ما هو عرض كتلة?

في تطوير الويب ، عرض الكتلة هو معلمة تحدد مدى اتساع عنصر على صفحة الويب. يمكن تحديد عرض الكتلة بالبكسل والنسب المئوية وكذلك في وحدات القياس الأخرى. يحدد عرض الكتلة مقدار المساحة التي سيشغلها العنصر على الشاشة وكيفية محاذاة المحتوى الآخر على الصفحة بالنسبة لهذا العنصر.

هناك طريقة أخرى لتغيير عرض الكتلة حسب المحتوى وهي استخدام جدول:

محتوى الكتلة

}

• على سبيل المثال ، قواعد كس التالية تعيين عرض عنصر إلى 200 بكسل:

  . عنصري {

  العرض: 200 بكسل;	}

• العرض: 50%;

أتش تي أم أل:

فهرس.أتش تي أم أل

نموذج النص