如何通过页面获得浮动Div Flush的一面？

Question

所以我有一个div，我需要刷新页面的左右边缘。它还必须响应进行中的布局（因此页面可以重新调整大小）。据我所知，最有效的方法是使用浮动布局。如何让div的边缘与屏幕边缘齐平？这是我目前的CSS：

#work {
    float: left;
    width: 100%;
    height: 500px;
    background: #fff;
}

我试过左：0px和右：0px，这显然不起作用（可能是因为它漂浮了......）

如果无法执行此操作，如何在仍然响应页面的其余部分时将其刷新？我觉得这是新Web开发人员那些古老的问题之一......

Answer 1

你不应该使用浮动来进行这种基本布局。

确保您正在重置默认浏览器添加的边距和填充，然后您可以使用display: inline-block来执行您想要的操作。

＆＃13;

＆＃13;

* { margin:0; padding:0 }

div {
    display: inline-block;
    width: 100%;
    height: 500px;
    background: dodgerblue;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，考虑一下您的响应式框架，您将能够使用一行代码完成此操作。所有响应式框架（Bootstrap，Foundation，skeleton等）都有一个全宽度类。

由于我99.99％的时间使用Bootstrap，我建议你也这样做，我会告诉你那个。

<div class="container-fluid thisContainer">

</div>

.thisContainer{
    background:#ccc;
    height:200px;
 }

就是这样！那简单！如果你想玩它，这是一个演示

DEMO