0

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

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

您能提供的任何帮助将不胜感激。

4

1 回答 1

0

浮动将是最简单的。您必须添加一个 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%;
于 2013-07-15T18:59:05.277 回答