2013-10-01 4 views
1

안녕하세요 저는 매우 특이한 것을 발견했습니다. 분명히 왼쪽은 옳지 않은 것으로 표현되었습니다. 이 바이올린을 참조 : 여기 http://jsfiddle.net/Hn8At/2/ 것은 내가 양쪽에 2 개 녹색 사각형이있는 HTMLcss bug? 왼쪽이 옳지 않은가?

<div id="wraper"> 
    <div id="ribbon_ct"> 
     <div class="ribbon left"></div> 
     <div class="ribbon right"></div> 
    </div> 
</div> 

과 CSS를

body{ margin:0; padding:0px; } 
#wraper{ width:800px; margin:0 auto; background:#eee;padding-top:500px;} 
#ribbon_ct{ width:100%; background:#c00; height:400px; } 
.ribbon{background:#0C9; width:30px; height:30px; position:relative;} 
.left{float:left;} 
.right{float:right;} 

.ribbon.left{ left:-30px;} 
.ribbon.right{ right:-30px;} 

이고, 하나는 스크롤이 발생, 다른 하나는하지 않습니다. 오른쪽으로 스크롤하면됩니다. 왜 어떤 아이디어?

+1

난 당신이 내가 아는 .... –

+0

을 무슨 말을하는지 이해하지 못했지만, '왼쪽 : .. px '와'right : .. px '는 위치에 상대적으로 작동하지 않습니다. – davey

+1

@davey 왼쪽과 오른쪽이 친척에게 적용됩니다. – avrahamcool

답변

1

절대적으로 정상입니다.

요소가 왼쪽에서 본문을 오버플로하면 해당 요소가 숨겨지고 오른쪽에서 스크롤됩니다.

overflow:hidden;#ribbon_ct에 사용하면 올바른 div를 숨기고 싶습니다.

+0

안녕하세요 저는 숨겨진 오른쪽 div가 아니며, 왼쪽과 오른쪽 사이에 차이가 있다는 것을 전혀 모릅니다. 이에 관한 문서에 링크 할 수 있습니까? –

0

귀하의 #ribbon_ct의 너비는 # 1024이며, 센터링 된 width: 100%이기 때문에 800px 너비입니다.

부모에게 너비를주지 않으면 (예 : body {width:1000px;}) 또는 뷰포트를 넓히면 left: -30px;에 위치했기 때문에 왼쪽 녹색 사각형을 볼 수 없습니다.

jsfiddle가 아닌 브라우저에서 직접 코드를 시험해보십시오.

그리고 #wraper가 중앙에 있지 않은 경우 크기를 조정하는 경우, 당신도 왼쪽 정사각형을 볼 수 없습니다,