부동 일 때 이상한 div 경계 문제가 발생했습니다.

Question

이 코드가 왜 그 결과를 생성하는지 설명해주십시오. 그리고 가능한 경우 해결/해결할 수있는 방법.

'z'와 'q'를 오른쪽의 '파란색 div 테두리'로 이동하지 마십시오.

또는

내가 사업부 'X' 'Z'와 'Q'로 consitant 또한뿐만 아니라 파란색 오른쪽 테두리를 통해 이동 싶습니다.

<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

캡쳐 화면을 제작 한 브라우저가 있습니까? IE 인 경우 100 % 너비를 계산할 때 테두리 너비가 무시되는 상자 모델에 문제가 있습니다.

보이지 않는 컨테이너를 만들어 내부 div의 크기를 조정하거나 내부 div의 크기를 container.width -2로 지정하십시오.

또한 너비 : 100 %를 제거해보십시오. div의

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

이 시나리오의 경우 디자인이 작동하지만 플로팅 요소를 지우지 않고 처리하지 않았을 때 매우 쉽게 손상 될 수 있습니다.

내가 만든 예를 참조 할 수 있습니다. 이러한 종류의 문제에 대해 작동하는 바이올린을 만들었습니다.

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