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

绝对正常。

如果一个元素从左边溢出，它将被隐藏，从右边它将被滚动。

如果您希望隐藏正确的div，请在overflow:hidden;上使用#ribbon_ct。

Answer 2

由于#wraper的width: 100%并且居中，因此#ribbon_ct的宽度为800px。

如果您没有为其父级提供宽度（例如body {width:1000px;}）或者扩大视口，则无法看到左侧的绿色方块，因为您定位了left: -30px;。

不要在jsfiddle中尝试使用您的代码，而是直接在浏览器中使用。

如果#wraper没有居中，即使调整大小，也看不到左方，

css bug？左边不同吧？

2 个答案: