여러 브라우저에서 CSS 플로트 문제가 발생했습니다.

Question

두 개의 다른 페이지에서 다음 CSS 설정을 사용할 수 있습니다.

#content{ 
width:960px; 
margin-top:0px; 
height:auto; 
font-family:arial; 
font-size:1.em; 
background-color:#f2f2f2; 
} 

#left-div { 
width:600px; 
padding-top:20px; 
text-align:center; 
line-height:.5em; 
display:inline-block; 
float:left; 
} 

#right-div { 
width:300px; 
margin-top:40px; 
margin-right:20px; 
display:inline-block; 
text-align:center; 
float:right; 
background-color:#e0e0e0; 
} 

#isa-left { 
width:440px; 
margin-top:40px; 
margin-left:30px; 
margin-right:10px; 
display:inline-block; 
text-align:justify; 
float:left; 
} 

#isa-right { 
width:440px; 
margin-top:40px; 
margin-left:10px; 
margin-right:30px; 
display:inline-block; 
text-align:center; 
float:right; 
} 

왼쪽의 div와 오른쪽 div를 사용하는 페이지에서;

<div id="content"> 
<div id="left-div"> Content </div> 
<div id="right-div"> Content </div> 
</div> 

여기에 있습니다. FF, IE, Safari 및 Chrome에서는 두 개의 div가 서로 옆에 있고 content div의 # f2f2f2 배경색으로 표시됩니다.

위와 같은 설정으로 isa-left 및 isa-right를 사용하는 두 번째 페이지에서 내부 div가 예상되는 위치에 계속 표시되지만 콘텐츠 div의 배경색은 표시되지 않습니다. 전시.

동일한 문제가있는 여기에서 게시물을 찾은 후 내용 입력란에 overflow:auto; 줄을 추가했습니다.

이제 FF의 두 페이지 모두 콘텐츠 div 외부에 표시되며 배경색은 960 픽셀로 표시됩니다. IE, Safari 및 Chrome에서 두 페이지가 완벽하게 나타납니다.

제 질문은 overflow:auto;을 추가 한 후 두 개의 내부 div가 FF의 콘텐츠 div를 벗어나는 이유는 무엇입니까? 또는 배경색을 overflow:auto;을 사용하지 않고 두 번째 페이지에 표시되도록 수정하는 방법이 있습니까?

모든 의견을 환영합니다.

Answer 1

시도해보십시오. 나는 그것이 당신의 문제에 대한 해결책일지도 모른다고 생각합니다.

http://jsfiddle.net/6dBdx/

-code 참조 -

CSS :

.wrapper { 
    width:400px; 
    margin-top:0px; 
    height:auto; 
    font-family:arial; 
    font-size:1.em; 
    background-color:#f2f2f2; 
    margin-bottom:15px; 
} 
.wrapper > div.box { 
    padding-top:20px; 
    text-align:center; 
    line-height:.5em; 
    border:thin solid #999; 
    /* Adding this for example purposes */ 
    height:150px; 
    width:150px; 
} 
.pull-right { 
    float:right; 
} 
.pull-left { 
    float:left; 
} 
.clear-fix { 
    clear:both; 
} 

HTML

<label>Float Left Only</label> 
<div class="wrapper"> 
    <div class="pull-left box">One</div> 
    <div class="pull-left box">Two</div> 
    <div class="clear-fix"></div> 
</div> 
<label>Float Left &amp; Right</label> 
<div class="wrapper"> 
    <div class="pull-left box">One</div> 
    <div class="pull-right box">Two</div> 
    <div class="clear-fix"></div> 
</div> 

빠른 메모, 부동 후 맑은 사업부를 추가하는 것을 잊지 마세요 그래서 엘리먼트를 떠 다니고 난 후에 엘리먼트가 올바르게 표시됩니다. 또한 요소가 서로 나란히 정렬되기를 원할 경우 요소가 오른쪽에 오도록하지 않으려면 float : left를 엄지 손가락으로 사용하십시오. float : right