Strani problemi ai bordi div quando si galleggia
Domanda
Potrei per favore avere una spiegazione del perché questo codice produce il risultato che fa? E un modo per risolverlo / aggirarlo, se possibile.
Non voglio che div 'z' e 'q' superino 'il bordo div blu' sulla destra.
O
Vorrei che div 'x' fosse coerente con 'z' e 'q' e oltrepassasse anche il bordo blu destro.
<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>
Soluzione
Attraverso quale browser hai prodotto lo screenshot? Se è IE, c'è un problema con il modello a scatola che provoca l'ignoranza della larghezza del bordo quando si calcola la larghezza del 100%.
O crei un contenitore invisibile per ridimensionare i div interni o ridimensionare il div interno in container.width -2.
Inoltre, prova a rimuovere la larghezza: 100%; dai div.
Altri suggerimenti
Il bordo rosso è effettivamente all'interno del bordo blu nell'immagine, ma suppongo che tu voglia aumentare il margine sui contenitori z e q ...
Mi sono preso la libertà di racchiudere gli attributi tra virgolette doppie e correggere le regole di stile che sono state ri-dichiarate (margine e margine inferiore) - ma mi scuso per la formattazione della linea - non riesco a ottenere per rimanere all'interno del blocco di codice su questo forum fino a quando non ho eliminato le interruzioni di riga:
<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>
Per questo scenario potrebbe essere che il tuo progetto stia funzionando, ma può rompersi molto facilmente poiché non hai cancellato e gestito elementi fluttuanti.
Puoi fare riferimento all'esempio che ho creato. Ho creato un violino funzionante per questo tipo di problemi.
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>