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

Question

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

我遇到的问题是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%;