居中的内容，背景仅向左侧延伸到浏览器边缘例如：http://kibart.com/ [关闭]答案

【问题标题】：Centered content, background extends only to the left to browser edge ex: http://kibart.com/ [closed]居中的内容，背景仅向左侧延伸到浏览器边缘例如：http://kibart.com/ [关闭]
【发布时间】：2014-09-19 05:05:57
【问题描述】：

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

【问题讨论】：

向该网站发送电子邮件并询问他们的代码

标签： html css layout

【解决方案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;
}

我希望这会有所帮助。

【讨论】：

完美。感谢您的帮助。
谢谢。请接受我的回答。