مشاكل غريبة الحدود شعبة عندما العائمة

Question

هل أستطيع يرجى الحصول على تفسير لماذا هذا الرمز ينتج نتيجة يفعل؟ ووسيلة لإصلاحه / العمل من حوله، إذا كان ذلك ممكنا.

وأنا لا أريد شعبة 'ض "و" س "أن يذهب أكثر" الحدود شعبة الأزرق "على اليمين.

أو

وأود شعبة 'س' أن consitant مع 'ض "و" س "وتذهب أيضا على الحد الأيمن الأزرق أيضا.

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
    </div>
     <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>

Answer 1

والفكر ما المتصفح هل تنتج لقطة؟ اذا كان IE، هناك مشكلة مع نموذج الصندوق الذي يتسبب في عرض الحدود لا يمكن تجاهله عند حساب العرض بنسبة 100٪.

وإما أن خلق وعاء غير مرئية لحجم الداخلية في شعبة أو حجمك شعبة الداخلي لcontainer.width -2.

وأيضا، في محاولة إزالة <م> عرض: 100٪؛ من ال شعبة

Answer 2

ووالأحمر الحدود هو في الواقع داخل الحدود الأزرق في الصورة - ولكن أفترض أنك ترغب في زيادة هامش الربح للض و ف حاويات ...

ولقد اتخذت حريته وتتضمن السمات في المزدوج ونقلت وتصحيح قواعد النمط الذي أعيد أعلن (الهامش والهامش السفلي) - ولكن الاعتذار عن خط التنسيق - أنا لا يمكن أن يبدو للحصول على على جميع البقاء داخل كتلة التعليمات البرمجية في هذا المنتدى حتى اخرجت فواصل الأسطر:

<div style="margin: 5px;width: 653px;border: blue 1px solid;float: left;"><div style="margin: 5px;width: 100%;border: red 1px solid;">z</div><div style="overflow: hidden;margin: 5px;width: 100%;border: red 0px solid;"><div style="margin: 0px;width: 300px;border: red 1px solid;float: left;">y</div><div style="margin: 0px;width: 300px;border: red 1px solid;float: right;">x</div></div><div style="margin: 5px;width: 100%;border: red 1px solid;">q</div>

Answer 3

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

ويمكنك الرجوع إلى المثال لدي created.I خلقت كمان العمل لمثل هذا النوع من المشاكل.

http://jsfiddle.net/mayankipsa/e7snvdag/

.floatLeft { float: left;}
.floatRight { float: right;}
.clearBOTH { clear: both; }

.redBorder{border:1px solid red;}
.blueBorder{border:1px solid blue;}

.x,.y{width:49%;margin:1px; }
.z{margin:1px;}
.q{margin:1px;}

<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
    <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
    <div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
            <div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
    </div>
     <div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>
</div>

<div class="clearBOTH"></div>
<div class="blueBorder" style="margin-top:50px;">
    <div class="z redBorder">z</div>
    <div class="redBorder">
        <div class="y floatLeft redBorder">y</div>
        <div class="x floatRight redBorder">x</div>
        <div class="clearBOTH"></div>
    </div>
    <div  class="q redBorder">q</div>
</div>