如何将div固定在侧边栏上并且不重叠

Question

我有2个div喜欢

<div class="container">
example data example data example data ...
</div>

<div class="sidebar"></div>

和我的风格一样

.container {
    width:300px;
    height:auto;
    margin:auto;
    padding-top:10px;
    background-color:blue;
}
.sidebar {
    height: 150px;
    width: 150px;
    background-color:#ddd;
    position:fixed;
    right:20px;
    top:60px;
}

我希望我的侧边栏已修复，当我缩放不重叠的小宽度窗口时

如何做到这一点谢谢 这是我的例子 http://jsfiddle.net/npUaf/

Answer 1

根据您的评论“我认为div可以消失”，您可以使用媒体查询：

@media screen and (max-width: 660px) {
    .sidebar {
        display: none;
    }
}

检查updated Fiddle

Answer 2

.container {
    width:300px;
    height:auto;
    margin-right: 200px;
    float: right;
    padding-top:10px;
    background-color:blue;
    }

将此css用于容器。