html - 向左浮动但在屏幕调整大小时停在某个点？

Question

我有一个 div 拉伸(stretch)我的页面的高度，向左浮动，例如:

#leftvignette {
    width: 200px;
    height: 100%;
    float: left;
}
#sitecontent {
    margin: auto;
    width: 1000px;
}

HTML:

<div id="leftvignette"></div>    
<div id="sitecontent">
    all other content here
</div>

我希望此 div 始终位于我内容的左侧，直到窗口宽度小于 1000 像素 - 我不希望 #leftvignette 侵入并覆盖我的内容。

有谁知道这样做的方法吗？

Answer 1

使用 CSS 媒体查询和 CSS clear 属性删除 float :

@media all and (max-width: 1000px) {
  #leftvignette {
    clear:both;
}
}

任何低于 1000 像素的内容都将删除 float: left。