在固定宽度容器内创建全宽度(100% )容器

・1 分钟阅读

有些时候我们需要在容器中添加一个固定宽度和对齐中心的全宽容器(宽度超过100%)。

下面的代码有助于实现布局。

演示:

HTML


 <div class="container" style="width: 750px; margin: 0 auto;">

<div class="row-full">
 --- Full width container ---
</div>

</div>

CSS


 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

它的工作方式:

这里使用了Css单位(视区宽度),上面的IE9支持vwvh css单元。

Picture

讨论
学以致用 profile image