떠 다닐 때 이상한 div 경계 문제

Question

이 코드가 결과를 생성하는 이유에 대한 설명을 얻을 수 있습니까? 그리고 가능하면 그것을 고치거나 해결하는 방법.

나는 Div 'Z'와 'Q'가 오른쪽의 'Blue Div Border'를 넘어 가기를 원하지 않습니다.

또는

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

Answer 1

Throught 스크린 샷을 생성 한 브라우저는 무엇입니까? IE 인 경우 100% 너비를 계산할 때 테두리 너비를 무시하는 상자 모델에 문제가 있습니다.

내부 DIV의 크기를 크기로 보이지 않는 컨테이너를 만들거나 내부 DIV 크기를 컨테이너 -Width -2.

또한 제거해보십시오 너비 : 100%; Div 's에서.

Answer 2

빨간색은 실제로 이미지의 파란색 테두리 안에 있습니다. 그러나 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>

Answer 3

이 시나리오에서는 디자인이 작동하는 것이지만 떠 다니는 요소를 지우거나 처리하지 않으면 서 매우 쉽게 파손될 수 있습니다.

당신은 내가 만든 예를 참조 할 수 있습니다. 나는 그러한 종류의 문제에 대한 바이올린을 만들었습니다.

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>