css浮動元素不包含在父div中

我試圖將響應快的YouTube視頻添加到我的幫助文件，但視頻不包含在父div中並溢出它。我已經嘗試了一些在這裏建議的修復程序，但似乎沒有工作。我想知道是否有人能指引我正確的方向。什麼我談論在這裏可以看到一個例子：http://designasticker.com.au/help.php您將需要使用以下的用戶名和密碼才能查看的頁面：css浮動元素不包含在父div中

用戶名：貼紙密碼：al765bd

來源

2013-11-05 Lee Firth

沒關係，我看到了登錄！ – Ming

嗯，這只是一個浮動問題。當你漂浮元素時，你將它們帶出文檔流程 - 這意味着，父級不再承認存在浮動子代。

您可以解決此通過添加僞元素後::父，在這種情況下，.displayScreen行：

.displayScreen-row:after { clear: left; 
    display: block; 
    height: 0; 
    visibility: hidden; 
    content: ' '; }

這將在符合標準的瀏覽器，而不是在IE 6或7。對於兩個瀏覽器（使用條件註釋只針對那些），你必須要解決像這樣：

IE 6：

.displayScreen-row { height: 100%; }

IE 7：

.displayScreen-row { min-height: 100%; }

IE 6和7錯誤地允許設置高度來確認漂浮的孩子。

來源

2013-11-05 01:13:48 Ming

是的，我在其他地方看到過這種修復方法，但似乎並未解決這個問題。 –

該修復程序正在工作......您現在的問題是.displayScreen-left和.displayScreen-right兩者的固定高度均爲100px。如果您將它們移除，您可以看到浮動清理工作正常。 – Ming

當談到CSS時，我感到非常黑客，感謝您指出這一點。我在開始時加入了背景色，這樣我就可以更好地看到div。刪除了背景顏色，但忘記了高度。再次感謝。 –

EDIT

添加負保證金：

margin: -120px;

和調整在iframe視頻：

<iframe width="YOUR INPUT" height="YOUR INPUT" src="//www.youtube.com/embed/-JWT_tC8_iE" frameborder="0" allowfullscreen></iframe>

用您自定義的寬度和高度替換「YOUR INPUT」。

來源

2013-11-05 01:07:34 Roooooo

css浮動元素不包含在父div中

回答

相關問題