Question

我正在开发一个网站，其中包含一些宣传网站各个方面的“广告块”。我的网站使用Skeleton框架进行设置，以便它具有响应性。我拥有的一个广告块只是两个在彼此之间旋转的图像...当屏幕尺寸旋转时，它可以正常创建和调整大小。

我有另一个广告块，它是带有背景图像的div，然后有一个特定的部分（中间），它有旋转的图像（使用jquery循环插件）。我的图像部分绝对定位，以便我可以将它显示在我想要的位置，只有那个方面在图像中旋转。背景图像部分适当调整大小，但是我的图像没有...它们保持相同的大小，因此在背景图像之外打破，我将其“框住”。

我嘲笑了发生什么事的快速小提琴： http://jsfiddle.net/DjvS9/1/

请注意，我只是将带有一些文本的div放在一起，而不是构成它的背景图像。

知道我做错了什么，以及我需要修理什么？是因为绝对的定位.. ??

我曾经为第一个广告块修复它的前提是我在这个小提琴中找到的例子：http://jsfiddle.net/vengiss/QRWAD/6/

非常感谢任何帮助！

谢谢！

Html代码：

<div id="bkgd">
<div id="MyAdBlock">
text<br />        
    text<br />
text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="MyAds" class="MyAdImg">
    <img src="http://placehold.it/165x197" width="165" class="placeholder1" />
    <a href="#" target="_blank"><img src="http://placekitten.com/165/197" class="image_size" alt="Img1" /></a>
    <a href="#" target="_blank"><img src="http://placekitten.com/165/194" class="image_size" alt="Img2" /></a>
    <a href="#" target="_blank"><img src="http://placekitten.com/165/195" class="image_size" alt="Img3" /></a>
    <a href="#" target="_blank"><img src="http://placekitten.com/165/196" class="image_size" alt="Img4" /></a>
</div>

CSS：身体{ 背景：＃000;
}

#bkgd{

}

#MyAdBlock{
position:relative;
background:#ffffff;  
max-width:50%;
height:auto;
border:5px solid red;
}

.MyAdImg{
position:absolute;
top:73px;
left:28px;
}

 .image_size{
max-width: 100%;
height: auto;
 }

jquery循环+响应式设计 - 绝对项目

0 个答案: