把旁邊的對方，但左邊和右邊的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; 
}