質問
このコードが結果を生成する理由を説明してもらえますか?そして、可能であれば、それを修正/回避する方法。
divの「z」と「q」が右側の「青いdivの境界線」を越えないようにします。
または
div 'x'が 'z'および 'q'と一致し、同様に青色の右境界線も通過するようにします。
<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>
解決
どのブラウザでスクリーンショットを作成しましたか? IEの場合、ボックスモデルに問題があり、100%の幅を計算するときに境界線の幅が無視されます。
不可視のコンテナを作成して、内部divのサイズを変更するか、内部divをcontainer.width -2にサイズ変更します。
また、 width:100%; をdivから削除してみてください。
他のヒント
実際には、赤枠は画像の青枠内にありますが、zコンテナとqコンテナのマージンを増やしたいと思います...
属性を二重引用符で囲み、再宣言されたスタイルルール(マージンとマージン下部)を修正する自由を取りましたが、行の書式設定については謝罪しませんでした。改行を削除するまで、このフォーラムのコードブロック内にすべてとどまります。
<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>
このシナリオでは、デザインは機能しているかもしれませんが、フロート要素をクリアして処理していないため、非常に簡単に破損する可能性があります。
作成した例を参照できます。この種の問題に対処するためのフィドルを作成しました。
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>
所属していません StackOverflow