我刚刚重做了我的网站 www.chartoonz.com
我创建了一个包装器 div,我在其中放置了一个带有指向我在 vimeo 上的视频的链接的 div。我将这个 div 向左浮动,在它旁边我 float 了一个带有一些关于电影的文本的 div,然后将它向右浮动。列看起来没问题,直到窗口调整大小。然后它们重叠得非常厉害,我不明白为什么。在调整窄窗口大小时,我希望右侧 float 列跳到左侧 float 列下方。
相关的 HTML 如下所示:
<div id="CopyWrapper" >
<div class = "copyFloatLeft">
<p><strong>Use Video to Communicate.</strong></p>
<p><iframe src="//player.vimeo.com/video/90334225" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
<br />
</p>
<br /><br />
</div>
<div class = "copyFloatRight">
<strong>Corporate Communications</strong>
<p> Corporate communications can be greatly enhanced through a well presented video. Ideas and concepts are easier to understand when they can be seen clearly and their meaning is made plain. Here, I present some of the work I did over the last few months, helping the Merrill Lynch digital advertising division get their message out.</p>
</div>
<br />
</div>
<br class="clearFloat" />
控制 CSS 如下所示:
#CopyWrapper{
background: center;
text-align: left;
display: block;
float: left;
width: 65%;
padding-left: 200px;
position: relative;
margin: 0 auto;
clear: both;
overflow: hidden;
}
.copyFloatLeft{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: left;
display: block;
}
.copyFloatRight{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: right;
display: block;
}
如有任何帮助,我们将不胜感激。
阿龙
最佳答案
.copyFloatLeft
和 .copyFloatRight
block 应该都向左浮动
对于 iframe,我会做类似的事情:
#CopyWrapper iframe {
width: 100%;
}
关于CSS float div 在窗口调整大小时重叠。我该如何阻止呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23022221/