Schräge div Grenzprobleme, wenn floating

Question

Könnte ich bitte eine Erklärung bekommen, warum dieser Code das Ergebnis erzeugt er tut? Und ein Weg, um es zu beheben / Arbeit um es, wenn möglich.

Ich möchte nicht div ‚z‘ und ‚q‘ zu gehen, über ‚die blaue div Grenze‘ auf der rechten Seite.

oder

Ich möchte div ‚x‘ mit ‚z‘ werden consitant und ‚q‘ und auch als auch dem blauen rechten Rand übergehen.

<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

Wodurch Browser hat produzieren Sie den Screenshot? Wenn es IE ist, gibt es ein Problem mit dem Box-Modell, das die Rahmenbreite verursacht ignoriert werden, wenn 100% Breite zu berechnen.

Entweder man einen unsichtbaren Behälter Größe schaffen die innere divs oder Größe Ihrer inneren div container.width -2.

Versuchen Sie auch, das Entfernen der . Breite: 100%; von dem divs

Answer 2

Die rot-Grenze ist tatsächlich innerhalb der blauen Grenze in Ihrem Bild - aber ich nehme an, Sie den Rand auf den z und q Behälter erhöhen wollen ...

ich mir die Freiheit einschließt, die Attribute in Anführungszeichen genommen haben und die Stilregeln zu korrigieren, die erneut erklärt wurden (Marge und margin-bottom) - aber Entschuldigungen für die Line-Formatierung - ich konnte nicht scheinen, sie alle in dem Code-Block in diesem Forum bleiben, bis ich die Zeilenumbrüche nahm:

<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

Für dieses Szenario kann Ihr Design arbeitet, kann aber sehr leicht brechen, wie Sie nicht gelöscht haben und behandelt Floats.

Sie können zu Beispiel verweise ich habe created.I eine Arbeits Geige für eine solche Art von Problemen geschaffen haben.

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>