中心内容，背景仅延伸到浏览器边缘左侧：http：//kibart.com/

Question

我想模仿本网站的白色主要内容区域＆gt; http://kibart.com/。内容居中，但白色区域一直延伸到浏览器的左侧。你是如何实现这种效果的？

Answer 1

有两个元素基本上创建了你所指的那个区域，它一直延伸到左边。首先是<div id="main-content">，另一个是<div class="left-filler">。 <div id="main-content">是<div>，其中包含所有主要内容，这些是在样式表中分配给它的样式：

#main-content {
    background-color: #fff;
    position: relative;
    width: 804px;
    padding: 30px 0 55px 0;
    float: left;
}

<div class="left-filler">是一个绝对定位的<div>，背景为白色，出现在主要内容<div>的左侧，其功能是隐藏箭头图案图像。这些是在样式表中分配给它的样式：

.left-filler {
    background-color: #fff;
    width: 4000px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    right: 500px;
    z-index: -20;
}

我希望这会有所帮助。