Question

我有一个div拉伸页面的高度，左边是浮动，例如：

#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始终位于我的内容的左侧，直到窗口宽度小于1000px - 我不希望#leftvignette侵入并覆盖我的内容。

有没有人知道这样做的方法？

Answer 1

使用CSS Media查询和CSS clear属性删除float：

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

任何低于1000px的东西都会浮动：左移。

Answer 2

#leftvignette {
    width: 200px;
    height: 100px;
    float: left;
    background:#000;
}
#sitecontent {
    margin: auto;
    width: 1000px;
    background:#f00;
    height:200px;
    float:left;
}
.clear{clear:both;}


<div id="leftvignette"></div>    
<div id="sitecontent">
    all other content here
</div>
<div class="clear">
<!--this will help in clearing float for next comming elements.-->
</div>

Answer 3

我建议您创建一些类似于.clear的util类，并在需要将html应用为类时使用它们。

<强> CSS：

.clear{
   clear:both;
}

<强> HTML

<div id="leftvignette" class="clear"></div>

记得在漂浮后使用它;它将清除div的两侧，因此不会在“Box”的左侧和右侧放置任何元素。

在您的情况下，如果您使用媒体查询会更好：

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

向左浮动但在屏幕上的某个点停止调整大小？

3 个答案: