[英]CSS Floated divs are overlapping on window resize. How do I stop this?
我剛剛完成了我的網站www.chartoonz.com
我創建了一個包裝器div,在其中放置了一個div,其中包含指向我在vimeo上的視頻的鏈接。 我將這個div左移,在它旁邊,我將一個關於電影的一些文字浮動到div上並向右浮動。 列看起來正常,直到調整窗口大小為止。 然后它們嚴重重疊,我不知道為什么。 在縮小窗口大小的情況下,我希望右側的浮動列跳到左側的浮動列下方。
相關的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
塊都應向左浮動
對於iframe,我會執行以下操作:
#CopyWrapper iframe {
width: 100%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.