1

你好，我发现了一个很奇怪的东西，显然左边的渲染与右边不同。看到这个小提琴： 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 个绿色方块，一个会导致滚动条，另一个不会。您只能滚动右侧的视图。关于为什么的任何想法？

4

2 回答 2

1

它绝对正常。

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

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

于 2013-10-01T09:12:06.810 回答
0

width: 100%由于#wraper 和居中， 您的#ribbon_ct 为800px 宽。

当你不给他的父母宽度（例如：）body {width:1000px;}或扩大视口时，你看不到左边的绿色方块，因为你定位了left: -30px;.

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

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

于 2013-10-01T09:19:32.153 回答