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

使用min-width而不是width

Answer 2

一些绝对的定位会对它进行排序。

您可以将重复的左背景图像应用于正文标记

正确的背景，我把它放在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;
}

Answer 3

你应该稍微改变一下：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;
}

将三个div放在一起，但左右div必须重复到浏览器的边缘

3 个答案: