[Html] تعويم: اليسار؛ مقابل العرض: مضمنة. vs display: inline-block؛ مقابل العرض: خلية الجدول ؛


Answers

أنا عادة استخدام float: left; وإضافة overflow: auto; لحل مشكلة الأصل المنهارة (بالنسبة إلى سبب نجاح ذلك ، overflow: auto ستقوم overflow: auto بالتوسع في الأصل بدلاً من إضافة أشرطة التمرير إذا لم تعطها ارتفاعًا صريحًا أو overflow: hidden أعمال overflow: hidden أيضًا). معظم احتياجات المحاذاة العمودية التي أستخدمها هي لخط واحد من النص في أشرطة القوائم ، والتي يمكن حلها باستخدام خاصية line-height . إذا كنت بحاجة فعلاً إلى محاذاة عنصر كتلة عاموديًا ، فسوف أقوم بتعيين ارتفاع صريح على الأصل وعنصر محاذاة رأسياً ، والموضع المطلق ، وأعلى بنسبة 50٪ ، والهامش السلبي.

السبب في عدم استخدام display: table-cell هي الطريقة التي تفيض بها عندما يكون لديك عناصر أكثر مما يمكن عرضه في الموقع. ستجبر خلية الجدول المستخدم على التمرير أفقيًا ، في حين ستقوم العوامات بلف قائمة الفائض ، مما يجعلها صالحة للاستخدام دون الحاجة إلى التمرير الأفقي.

أفضل شيء حول float: left and overflow: auto هو أنه يعمل على طول الطريق مرة أخرى إلى IE6 بدون اختراق ، وربما أكثر من ذلك.

Question

سؤالي (ق)

  1. هل يفضل أي من هذه الأساليب مصمم ويب محترف؟

  2. هل هناك أي من هذه الطرق تم إعدادها مسبقًا بواسطة متصفح الويب عند رسم الموقع؟

  3. هل هذا كل تفضيل شخصي فقط؟

  4. هل هناك تقنيات أخرى أنا في عداد المفقودين؟

ملاحظة: الأسئلة الواردة أعلاه تتعلق بتصميم تصميم متعدد الأعمدة

تعويم: اليسار؛

http://jsfiddle.net/CDe6a/

هذه هي الطريقة التي أستخدمها دائمًا عند إنشاء تخطيطات الأعمدة ، ويبدو أنها تعمل بشكل جيد. لا ينهار الوالد على نفسه ، لذلك عليك فقط أن تتذكر أن clear:both; بعد ذلك. اختلاف آخر وجدته للتو هو عدم القدرة على محاذاة النص رأسيًا.

عرض: المضمنة.

يبدو أن هذا يعمل على تصحيح مشكلة الوالد المنهار ، ولكنه يضيف مسافة بيضاء.

http://jsfiddle.net/CDe6a/1/

إزالة whitespace من html يبدو أن يكون أسهل حل هذه المشكلة ، ولكن ليس من المطلوب إذا كنت حقا من الصعب إرضاءه حول html الخاص بك.

http://jsfiddle.net/CDe6a/2/

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

يبدو أن تتصرف تمامًا مثل display:inline; .

http://jsfiddle.net/CDe6a/3/

عرض: الجدول الخلية؛

http://jsfiddle.net/CDe6a/4/

يعمل الكمال.

افكاري:

أنا متأكد من أني افتقد الكثير من الأشياء ، مثل استثناءات معيّنة من شأنها كسر التنسيق ولكن ، display:table-cell; يبدو أن العمل الأفضل ، وأعتقد أنني سأبدأ استبدال float:left; كما يبدو لي دائما الفوضى clear:both; . لقد قرأت العديد من المقالات والمدونات حول هذا الموضوع على الويب ، ولكن لا أحد منهم أعطني إجابة محددة حول ما يجب استخدامه عند وضع موقعي على الويب.




أنا أفضل مضمنة ، على الرغم من أن تعويم مفيد أيضا. لا يتم تقديم خلية الجدول بشكل صحيح بواسطة IEs القديمة (ولا تتوافق مع المضمّنة ، ولكن هناك zoom: 1; *display: inline اختراق داخلي استخدمه كثيرًا). إذا كان لديك أطفال لديهم ارتفاع أصغر من الوالد ، فإن العوامات ستجلبهم إلى الأعلى ، في حين أن البلوك المضمن سوف يفسد في بعض الأحيان.

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

في الواقع كله ، نعم ، يتلخص في تفضيل شخصي.

إحدى التقنيات التي يمكنك استخدامها للتخلص من المساحة البيضاء هي تعيين font-size من 0 إلى الوالد ، ثم إعادته إلى الأطفال ، على الرغم من أن ذلك يمثل متاعب وإجماليًا.




أفضّل inline-block ، لكن float لا يزال طريقة مفيدة لوضع صفحات HTML ، خاصة عندما يكون لدينا عناصر يجب أن تلتصق باليسار وواحدة إلى اليمين ، تطفو تعمل بشكل أفضل مع كتابة أسطر أقل ، بينما تعمل الممرات على نحو جيد في كثير من الحالات الأخرى.