css ошибка? левый отличается от права?

Привет, я нашел очень своеобразную вещь, видимо, левая, отличается от правой. увидеть эту скрипку: http://jsfiddle.net/Hn8At/2/ вот HTMLcss ошибка? левый отличается от права?

<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 зеленых квадратов на каждой стороне, один вызывает скроллбар, а другой нет. Вы можете прокручивать только один правый. любые идеи относительно чего?

источник

2013-10-01 Victor Radu

Я не понимаю, что вы говорите .... –

Насколько я знаю, «осталось: .. px 'и' right: .. px 'не работают в позиции: относительные блоки. – davey

@ davey влево и вправо работает с родственниками .. – avrahamcool

Его абсолютно нормальный.

Если элементы переполняют тело слева, он будет скрыт, а справа он будет прокручиваться.

использовать overflow:hidden; на #ribbon_ct, если вы хотите, чтобы правый div был скрыт.

источник

2013-10-01 09:12:06 avrahamcool

Здравствуйте, я не хочу, чтобы правый div был скрыт, я просто не знал, что есть разница между левым и правым .. можете ли вы ссылаться на документацию по этому поводу? –

Ваш #ribbon_ct имеет ширину 800 пикселей из-за width: 100% #wraper и centered.

Если вы не указали ширину своего родителя (например: body {width:1000px;}) или увеличьте область просмотра, вы не увидите левый зеленый квадрат, потому что вы разместили left: -30px;.

Попробуйте код не в jsfiddle, а непосредственно в браузере.

И если #wraper не по центру, вы не можете видеть левый квадрат даже при изменении размера,

источник

2013-10-01 09:19:32 Atilla

css ошибка? левый отличается от права?

ответ

Смежные вопросы