كتلة مضمنة على الامتداد

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

سؤال

كنت أتوقع أن يتم عرض علامتي الامتداد في النموذج التالي بجوار بعضهما البعض، وبدلاً من ذلك يتم عرض واحدة أسفل الأخرى.إذا قمت بتعيين عرض الفئةspan.right على 49% فسيتم عرضها بجانب بعضها البعض.لا أستطيع معرفة سبب دفع النطاق الصحيح للأسفل مثل النطاق الصحيح الذي يحتوي على بعض الحشو/الهامش غير المرئي مما يجعله يستغرق أكثر من 50%.أحاول إنجاز ذلك دون استخدام جداول html.أيه أفكار؟

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

شكرا على الشرح.التعويم: اليسار يعمل بشكل جميل مع النتائج المتوقعة في FF 3.1.لسوء الحظ، في IE6، يعرض الامتداد الجانبي الأيمن 50% من 50%، مما يمنحه في الواقع عرضًا قدره 25% من نافذة المتصفح.يؤدي ضبط عرضه على 100% إلى تحقيق النتائج المرجوة ولكنه ينقطع عن FF 3.1 الموجود في وضع الامتثال للمعايير وأنا أفهم ذلك.إن جعله يعمل في كل من FF وIE 6، دون اللجوء إلى الاختراق أو استخدام أوراق CSS المتعددة، كان يمثل تحديًا

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

المحلول 

float: left;

حاول إضافة ذلك إلىspan.left

سيؤدي ذلك إلى تعويمه إلى اليسار (كما يقترح بناء الجملة).

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

إذا قمت بتعويم الامتدادspan.right إلى اليمين ثم أضفت نصًا أسفله، فيجب أن تحصل على بعض النتائج المثيرة للاهتمام، لإيقاف هذه "النتائج المثيرة للاهتمام" يمكنك استخدام "clear:left/right/كلاهما" مما سيؤدي إلى ظهور الكتلة ذات التصميم الواضح تحت أي شيء عائم على اليسار/اليمين/كلاهما. W3Schools لديك صفحة على هذه الخاصية أيضا.

ومرحبا بكم في Stackoverflow.

نصائح أخرى

وذلك لأن السطر والكتلة المضمنة تتضمن مسافة بيضاء (في حالتك فاصل الأسطر) بين العناصر.في حالتك، يكون العرض المجمع للعناصر هو 50%+50%+مسافة بيضاء > 100%.

يجب عليك إما وضع العنصرين في نفس الصف في مستند HTML الخاص بك (بدون مسافة)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

أو استخدم تعليقات HTML

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

أنا نفسي أفضل هذا الأخير.

لا أحب هذا الاختراق ولكن يبدو أنه يقوم بالمهمة في كل من Firefox وIE6:

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

لاحظ ال *width: 100% والذي يبدو أنه يلبي متطلبات IE6 ويتم تجاهله بواسطة Firefox.

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