Question

我有一个中心固定宽度布局的页面。我通过将所有内容包装在div中，添加固定宽度和margin: auto来完成此操作。但后来我的标题背景会延伸到整个页面（只有背景）。有没有办法做到这一点（没有将单个固定宽度+边距自动div分成许多div）？

Answer 1

您可以在div s上使用绝对定位的伪元素：

#main-page {
   width: 50%;
   margin: 0 auto;
}
div.full-width {
   position: relative;
   background: black;
}
div.full-width:before, div.full-width:after {
   content: "";
   position: absolute;
   background: black;  /* Match the background */
   top: 0;
   bottom: 0;
   width: 9999px;   /* some huge width */
}
div.full-width:before {
   right: 100%;
}
div.full-width:after {
   left: 100%;
}

查看本教程：http://css-tricks.com/full-browser-width-bars/

Answer 2

不是很优雅，但这是一个解决方案：http://dabblet.com/gist/2789029 - 它使用巨大的负边距和相等的填充。

这就是诀窍：

body {
    overflow-x: hidden;
}
.central {
    width: 400px;
    margin: 0 auto;
    outline: solid 1px red;
}
h1 {
    margin: 5px -2000px;
    padding: 5px 2000px;
    outline: solid 1px blue;
    background: cyan;
}

Answer 3

类似，但却是一个简单实用的解决方案的示例：http://jsfiddle.net/grE5A/41/

#main_container {
    width:400px;
    min-height:360px;
    margin:10px auto;
    background:#000;
    overflow:visible;
}

#heading_div_bg {
    background-color:green;
    height:50px;
    width:100%;
    position:absolute;
    margin:0px auto;
    left:0px;
    top:50px;
}

#heading_div {
    background-color:darkgreen; /*set to same as header_div*/
    text-align:center;
    height:50px;
    width:400px; /*same as container*/
    position:relative;
    margin: 0 auto;  
}

中心固定宽度布局，元素在整个页面上延伸

3 个答案: