html - 如何让 float Div 的两侧与页面齐平？

Question

所以我有一个 div，我需要与页面的左右边缘齐平。它还必须响应正在进行的布局(以便页面可以重新调整大小)。据我所知，最有效的方法是使用 float 布局。如何使 div 的边缘与屏幕边缘齐平？这是我当前的 CSS:

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

我尝试了 left: 0px 和 right: 0px，这显然不起作用(可能是因为它是 float 的......)

如果没有办法做到这一点，我怎样才能使它刷新同时仍然响应页面的其余部分？我觉得这是新 Web 开发人员的那些古老问题之一......

Answer 1

你不应该为这种基本布局使用 float 。

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

* { margin:0; padding:0 }

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

<div></div>