Clearfix不能在div中處理視頻

我嘗試了很多不同類型的clearfixes，但都沒有工作。我正在嘗試製作一個全寬視頻標題，其中包含文本，但您也可以向下滾動。這是我有：Clearfix不能在div中處理視頻

HTML：

<div> 
    <div style="width: 100%; position: relative;" class="video-container clearfix"> 
     <video autoplay loop style="width: 100%; position: absolute; top: 0px; left: 0px;"> 
      <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"> 
      <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 
     </video> 
     <div class="col-md-12" style="text-align: center;"> 
      <h1>HI</h1> 
      <h1>HI</h1> 
      <h1>HI</h1> 
     </div> 
    </div> 
    <div> 
     <h3>TEST</h3> 
     <h3>TEST</h3> 
     <h3>TEST</h3> 
    </div> 
</div>

CSS：

.clearfix:after { 
    content: " "; 
    display: table; 
    clear: both; 
}

我想HI的出現在視頻（工作）的前面，但我想TEST要出現在視頻下方，但現在他們不這樣做，因爲video-container比視頻高度短得多。

爲什麼我的clearfix不起作用？

來源

2016-12-15 georgej

Ehm，你只能使用clearfix來清除浮點數，而不是絕對位置。 –

您誤解了clearfix的目的，它旨在確保容器能夠正確地封裝其浮動的子項。（不是絕對定位的孩子）。

當你絕對定位一個元素時，你將它從文檔流中取出，所以沒有辦法動態地包含它（不包括javascript）。您必須明確設置容器的高度，使其與您的孩子的身高（）匹配。

更改代碼：

<div> 
    <div class="video-container row"> 
     <video class="col-md-12"> 
      <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"> 
      <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 
     </video> 
     <div class="overlay"> 
      <h1>HI</h1> 
      <h1>HI</h1> 
      <h1>HI</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     <h3>TEST</h3> 
     <h3>TEST</h3> 
     <h3>TEST</h3> 
     </div> 
    </div> 
</div> 

.overlay { 
    position: absolute; 
    top: 0; 
    left:0; 
    width: 100%; 
    text-align: center; 
} 
.video-container { position: relative; }

證明fiddle。

來源

2016-12-15 22:06:24 Baconbeastnz

Clearfix不能在div中處理視頻

回答

相關問題