使用Foundation缩小重叠图像

时间:2014-02-13 21:04:05

标签: css zurb-foundation

我的css技能有限,所以我希望有人能帮助我...

我使用的是基础,我有2个div,有2个图像。左侧div重叠右侧div。调整浏览器大小后,左侧图像将失去其原始位置。

这是展开浏览器时的the site looks like

这就是I resize the browser.

时发生的事情

这是我目前在左图像(线框图像)上的代码

.wireframe-img {
    display: block;
    float: left;
    margin-top: 50px;
    max-width: 815px;
    overflow: hidden;
    padding-left: 50px;
    position: absolute;
    width: 100%;
    z-index: 1

}

右边的图像(ipad)在这个代码的div中:

.small-7 {
    position: relative;
    width: 58.3333%;
}
.column, .columns {
    float: left;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
}
.right {
    float: right !important;
}

我基本上希望“线框”图像缩小,并且在调整浏览器大小时不会丢失它的原始位置。

1 个答案:

答案 0 :(得分:0)

不是重叠图像,在你的情况下,最好只有两个彼此相邻的单独图像匹配像素完美。

然后只有一个这样的图像: http://puu.sh/6UTqY.jpg 而另一个是这样的: http://puu.sh/6UTqa.jpg(大致)

除非另外有理由说明为什么要将这些图像分开并试图重叠它们?