重新调整浏览器大小时，我有2个div重叠

debugcn 发表于 Dev

萨克雷德

如您所见，我将图像设置为响应式，以便在调整浏览器大小时相应地拉伸，从而使图像适合并保持其比例。那就是我想要的。我不想要音乐播放器与图像重叠。

我也想保持他们的位置，保持居中，并彼此靠近。

我尝试寻找解决方案，但发现的所有情况均处于不同状况，无济于事。我敢肯定这是一个愚蠢的简单解决方法，只是无法解决这个问题。http://jsfiddle.net/6ML3s/

的HTML

<body>

<img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false"/>

<div class="player"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" /></div>

</body>

的CSS

body {
    background-color:#B1ACA9;
}
.bg {
    height:91%;
    position: absolute;
    bottom: 0;
    right: 25%;
    z-index: -1;
}
.player {
    position:absolute;
    top:50%;
    left:40%;
    z-index:99999;
}

试试这个：http : //jsfiddle.net/lotusgodkk/6ML3s/2/

HTML：

<div class="container">
    <div>
        <img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false" />
    </div>
    <div class="player">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" />
    </div>
</div>

CSS：

.container {
    width:100%;
    height:300px;
    display:table;
}
.container div {
    display:table-cell;
    width:49%;
    vertical-align:middle;
}
.container div img {
    max-width:100%;
}

将您的代码包装在div中，将图像包装在div中。我曾经用过，width:49%但您可以根据自己的用途和要求进行调整。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。