Question

这个网站是专为平板电脑设计的，问题是，当调整窗口大小时，三个div及其背景图像（它们垂直堆叠）之间存在边距或某种间隙。图像是三件黑板。中间div需要能够通过文本输入进行扩展，而顶部是静态的，底部部分在中间扩展时被推下。

链接到网站：

网址不再可用

到目前为止，

Div的CSS

.blackboard1 {
background:url(../img/chalkboardtop.png);
height: 28px;
background-size:100% auto;
background-repeat:no-repeat;
z-index:9999999;
}

.blackboard2 {
background-size:100% auto;
background:url(../img/chalkboardmiddle.png);
background-size:100% auto;
background-repeat:repeat-y;
z-index:-9999999;
padding-top:28px;
padding-bottom:35px;
overflow:visible;
}

.blackboard2 p{
color:#fff;
background-color:none;}



.blackboard3 {
background-size:100% auto;
background:url(../img/chalkboardbottom.png);
height: 28px;
background-size:100% auto;
background-repeat:no-repeat;
z-index:9999999;    
}

#blackboardWrap {
background:url(../img/chalkboardmiddle.png); */
background-size:100% auto;
background-repeat:repeat-y;
}

我使用的一个我认为不是最佳的解决方案是将图像作为中间图像，也作为第四个背景，包裹所有三个div并位于它们后面。这种方式当div之间存在“裂缝”时，您无法注意到这一点。使用这个解决方案似乎会增加加载时间，也看起来不太正确。

1 个答案:

答案 0 :(得分：3)

Answer 1

差距是因为利润率：

p {
    margin: 0 0 10px;
}

请删除这些边距，看看是否还有差距。

消除DIV之间的差距

1 个答案: