css bug？左是不同的權利？

Question

你好，我發現一個非常奇怪的東西，顯然左是不同的權利。 看到這個小提琴： http://jsfiddle.net/Hn8At/2/ 下面是HTML

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

我兩邊2個綠色廣場，一個導致滾動條，其他沒有。您只能將正確的一個滾動到視圖中。任何想法爲什麼？

Answer 1

它絕對正常。

如果元素從左側溢出，它將被隱藏，並且從右側開始將被滾動。

使用overflow:hidden;上#ribbon_ct如果你想正確的div被隱藏。

Answer 2

您的#ribbon_ct寬度爲800px，因爲#wraper的width: 100%居中。

當你不給他的父母的寬度（例如：body {width:1000px;}）或加寬視口，你不能看到左邊的綠色正方形，因爲你定位left: -30px;。

試試你的代碼不是在jsfiddle中，而是直接在瀏覽器中。

如果#wraper不集中，調整大小，當你無法看到甚至左方，