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%;

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

1 个答案: