把旁边的对方，但左边和右边的div 3个格必须重复到浏览器的边缘

Question

http://dentaliran.ir/back-final-mata.gif

上面的图像是一个网站的标题， 你可以看到它的3部分 离开 中心 权

我们怎样才能把这三部分放在3格中，但左右部分必须重复到浏览器的边缘？

固定宽度，我们可以放三死彼此相邻像这样：

#wrapper 
{ 
    width:1000px; 
    margin:0 auto; 

} 
#left 
{ 
    background:url(pics/left.jpg) repeat-x; 
    height:192px; 
    width:100px; 
    float:left; 
} 
#center 
{ 
    background:url(pics/center.gif) no-repeat; 
    height:178px; 
    width:800px; 
    float:left; 

} 
#right 
{ 
    background:url(pics/right.jpg) repeat-x; 
    height:192px; 
    width:100px; 
    float:left; 
} 

，但左，右都没有固定的宽度，必须重新无限时什么？

非常感谢

Answer 1

您应该更改位：http://jsfiddle.net/maximgladkov/6GE3x/1/

HTML

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="center"></div> 
    <div id="right"></div> 
</div> 

CSS

div { 
    height: 100px; 
} 

#wrapper { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

#left, #center, #right { 
    display: table-cell; 
} 

#center { 
    width: 200px; 
} 

#left { 
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/MARPAT_woodland_pattern.jpg/50px-MARPAT_woodland_pattern.jpg) repeat-x; 
} 

#center { 
    background: url(http://3.bp.blogspot.com/-Q11tJy3fAhA/UUnEu5Q3BtI/AAAAAAAAFEQ/TPBl0Sd5V9I/s1600/dark-brown-wood-pattern.jpg) no-repeat center center; 
    background-size: cover; 
} 

#right { 
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/MARPAT_woodland_pattern.jpg/50px-MARPAT_woodland_pattern.jpg) repeat-x; 
} 

Answer 2

使用最小宽度，而不是宽度

Answer 3

一些绝对定位将对其进行排序。

您可以应用重复body标签

右背景左背景图片，我把它放在一个div，绝对位置更靠近顶部，

body { 
    background:url(pics/left.jpg) repeat-x; 
} 

#right{ 
    background:url(pics/right.jpg) repeat-x; 
    position: absolute; 
    top: 0px; 
    right: -50%; 
    height: 100px; 
    width:100%; 
    z-index: -1; 
}