浮动时出现奇怪的div边框问题

Question

请问为什么这段代码会产生这样的结果？如果可能的话，请提供修复或解决方法。

我不希望 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>

- Jase Whatson

Answer 1

你用什么浏览器截图的？如果是IE，那么存在一个盒模型问题，导致在计算100%宽度时忽略了边框宽度。

你可以创建一个不可见的容器来调整内部div的大小，或者将内部div的大小设置为容器宽度-2。

此外，尝试从div中删除width: 100%;。

- Laurent Villeneuve

---

й—®йўҳеҮәзҺ°еңЁFirefox 3е’ҢIE7дёӯпјҲжІЎжңүеңЁе…¶д»–жөҸи§ҲеҷЁдёӯжөӢиҜ•пјүгҖӮеҲ йҷӨwidthпјҡ100пј…и§ЈеҶідәҶжҲ‘зҡ„й—®йўҳгҖӮ - Jase Whatson

Answer 2

在您的图像中，红色边框实际上在蓝色边框内部 - 但我假设您想增加 z 和 q 容器的边距...

我已经将属性用双引号括起来并更正了重新声明的样式规则（margin 和 margin-bottom）- 但对于行格式化表示歉意 - 我似乎无法让它全部保留在此论坛的代码块中，直到我删除了换行符：

<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>

- Fenton

Answer 3

对于这种情况，您的设计可能有效，但很容易破裂，因为您没有清除和处理浮动元素。

您可以参考我创建的示例。我已经为这种问题创建了一个工作的 fiddle。

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>

- Mayank Gupta