عناصر مستوى الكتلة داخل العرض:مضمنة كتلة

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

سؤال

أحاول وضع بعض عناصر العرض (المكدسة رأسيًا): عناصر الكتلة داخل عنصر العرض: عنصر الكتلة المضمنة.وفقًا لمواصفات CSS، يجب أن يكون عنصر الكتلة المضمّنة عبارة عن كتلة تحتوي على عناصر، بحيث يمكن أن تحتوي على عناصر العرض: الكتلة داخلها ويجب ألا تؤثر تلك العناصر على بقية التخطيط.

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

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

يظهر ما ورد أعلاه كجزأين، اللون الأحمر الأيسر، والأخضر الأيمن، كما هو متوقع.إذا قمت بتغيير "الحق" إلى 

<p>Right</p>

أو إزالته بالكامل، أو (كما أريد أن أفعل) استبدله بقسمين، أحصل على التنسيق السيئ.

هل هذا خطأ في Firefox، أم أنني أفعل شيئًا خاطئًا، أم أن توقعاتي غير صحيحة؟(FWIW، IE 7 يخلطهم جميعًا بالتساوي، كما لو أنه لا يفهم الكتلة المضمنة؛لا يهم، هذا تطبيق داخلي.وأنا أستخدم Firefox فقط).قد أتمكن من الحصول على التخطيط الذي أريده باستخدام التعويم/الهامش، لكنني أفضل عدم الاضطرار إلى القيام بذلك.

هل كانت مفيدة؟

المحلول

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

CSS

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

عرض:-moz-inline-stack هو لمتصفح فايرفوكس 2.سوف يحتاج جميع الأطفال المباشرين إلى الحصول عليه عرض:حاجز أو تكون عناصر على مستوى الكتلة.لاحظ ما إذا كنت بحاجة إلى عنصر الكتلة المضمنة الخاص بك لتقليص الغلاف الذي أعتقد أنه يمكنك استخدامه عرض:-moz-inline-box بدلاً من.

تكبير:1 يعطي hasLayout للعنصر (لـ IE 7 وما دونه).الجزء الأول من الاختراق المطلوب لتوافق IE7 وما دونه.

**عرض:inline* عبارة عن جزء ثانٍ من الاختراق المطلوب للتوافق مع IE7 وما دونه.

أحتاج أحيانًا إلى إضافة الفائض:مخفي للتوافق مع IE أيضًا.

بالنسبة لموقفك المحدد، أعتقد أن ما تحتاجه هو:

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

نصائح أخرى

<اقتباس فقرة>   

وأحصل على التنسيق سيئة.

ويجري لعض لك من قبل هامش تنهار ، ل CSS "شطارة" الذي هو الألم بقدر ما هو نعمة. على هامش

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

ويمكنك التوقف عن ذلك يحدث عن طريق إزالة الهوامش من عناصر 'ع' واستخدام الحشو بدلا من ذلك. وضع بدلا من ذلك عنصر غير فارغة مع عدم وجود الهامش العلوي في الجزء العلوي من كتلة واحدة مع عدم وجود الهامش السفلي في الجزء السفلي.

<اقتباس فقرة>   

هل هذا خلل فايرفوكس

وأعتقد ربما نعم، وفقا لمواصفات و:

<اقتباس فقرة>   

وهوامش من العناصر المضمنة كتلة لا تنهار (ولا حتى مع أطفالهم في التدفق).

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top