html - 将三个 div 并排放置，但左右 div 必须重复到浏览器的边缘

Question

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

上图是网站的标题， 如您所见，它分为 3 部分 左边 中心 对

我们如何将这三个部分放在 3 个 div 中，但左右部分必须重复到浏览器的边缘？

对于固定宽度，我们可以像这样将三个骰子并排放置:

#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;
}