调整浏览器窗口大小时重叠内容

Question

这是我第一次在论坛上发帖，我不是一个网络开发人员，但我一直在学习。

我遇到的问题是http://www.audiofactory.co.uk.

有些页面上有音乐播放器。使用Wordpress插件创建。有关示例，请参阅以下页面。

-services/audio-books/
-services/voiceovers/
-services/voicereels/
-/services/radiocontent/
-/our-team/voice-talent/

我为每个播放器编辑了一些CSS样式，为给定的页面赋予特定的宽度。

/* ===== "voicetalent" ===== */     
.voicetalent div.playlist-colour { position:absolute; height:115px }        
.voicetalent div.playlist-wrap-MI ul { position:static; height:115px }
/* ===== "voicereels" ===== */  
.voicereels div.playlist-colour { position:absolute; height:207px }     
.voicereels div.playlist-wrap-MI ul { position:static; height:207px }
/* ===== "audiobooks" ===== */  
.audiobooks div.playlist-colour { position:absolute; height:251px  }        
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px  }

如果你看看http://www.audiofactory.co.uk/services/audio-books/你可以看到，当你调整浏览器窗口的大小时，播放器并没有像你预期的那样调整大小，而是与左边的图像重叠。我希望播放器在更改浏览器宽度时自动调整其宽度，以便一切保持相对。

我已经和音乐播放器插件的开发者谈过了，他建议这个

这看起来只是一个标记问题，如果您浮动播放器和图像，或者在短代码中使用"pos"参数，或者将短代码包装在另一个给定宽度的浮动div中，这可能会起作用。

由于指示不是很具体，我有点不确定如何实施这些建议。

我试着用<div>包装我的短代码，但可能完全错了。

/* ===== "audiobooks" ===== */  
<div position:float;>
.audiobooks div.playlist-colour { position:absolute; height:251px  }        
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px  }
</div>

如果您能提供任何帮助，我们将不胜感激。

Answer 1

浮动是最简单的。您必须添加一个clearfix才能正常工作，这样您就可以强制浮动元素在堆叠时按照需要进行操作。

首先，将其包含在顶级（文件顶部）的主样式表中。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

在有声读物的html中，您必须添加clearfix类，如下所示。

<div id="wrapperMI_0" class="clearfix wrap-MI audiobooks nolistbutton nopn">

在css中的div.wrap-MI类上添加：

float: left;
width: 48%;