سؤال

وأريد أن إنشاء مربع بسيط مع شريط رأس يحتوي عنوان وبعض أزرار الأداة. لدي العلامات التالية:

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

وهذا يجعل غرامة في فايرفوكس وكروم:

http://www.boplicity.nl/images/firefox.jpg

ولكن IE7 عبث تماما ويضع الحق عنصر طرحت على يمين الصفحة:

http://www.boplicity.nl/images/ie7.jpg

ويمكن ان تكون ثابتة هذا؟

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

المحلول

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

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

نصائح أخرى

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

وحتى هذا يجب أن تعمل مع IE7 وغيرها من المستعرضات الحديثة. تعيين العرض دقيقة على كل ما هو مناسب.

<div style="float:left; min-width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

وأنا ثابت باستخدام مسج لمحاكاة سلوك المتصفحات غير IE:

    // IE fix for div widths - size header to width of content
    if (!$.support.cssFloat) {
        $("div:has(.boxheader) > table").each(function () {
                $(this).parent().width($(this).width());
        });
    }

ومحاولة وضع position:relative; إلى الأصل عنصر وإلى عنصر تابع. أنها تحل مشكلة بالنسبة لي.

وصلت الى معرفة مؤخرا أن الحق تعويم العناصر لا بد من إلحاق مع عناصر div قبل العناصر الأخرى. هذا هو أسهل الإصلاح دون إضافة خط التغيير.

<div style="background-color:blue; padding: 1px; height: 20px;">
    <div style="float: right; background-color:green;">title</div>
    <div style="float: left; background-color:yellow;">toolbar</div>
</div>

تأكد هذا <div style="background-color:blue; padding: 1px; height: 20px;> الوالد من عناصر div العائمة 2 أيضا clear:all

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