CSS，DIV的響應

-3

我試圖實現類似的東西：你必須知道它應該是全屏幕CSS，DIV的響應

What i'm trying to achieve

月1日，這就是爲什麼我使用％。

到目前爲止，無論我的屏幕寬度如何，我只能將視頻留在16：9。我也能夠創建兩個較輕的藍調divs，但它們不會自動適合視頻和頁腳之間的空間。

我也做了紅色的div。

現在我想知道如何讓小藍色的div適合這個空間，因爲現在它們並沒有出現，而且唯一的方法就是設置一個固定的高度，尋找。我還想知道如何製作寬屏幕的第二個數字。

這裏是我的代碼：http://codepen.io/EzhnoFR/pen/KNMBGO

<div id="aszone"> 
</div> 

<div id="pbzone"> 

     <div id="pgzone"> 
      <video width="100%" preload="none" autoplay="true"> 
     <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
      <source type="video/mp4" src="http://brunotarhan.fr/intro.mp4" /> 

     </div> 

     <div id="ppzone"> 

      <div id="pp1"> 
      </div> 

      <div id="pp2"> 
      </div> 

     </div> 

</div> 

<div id="gzone"> 
</div> 

html, body { 
    margin: 0; 
    padding: 0; 
} 

div{ 
    border: 0px solid black; 
} 

video{ 
    width:100%; !important; 
} 

#aszone, #gzone{ 
    height: 10%; 
    background-color: grey; 
    background-size: cover; 

} 

#gzone{ 
    height: 10%; 
    bottom: 0; 
    position:absolute; 
} 

#pbzone{ 
    height: 50%; 
    position: relative; 

} 

#ppzone{ 
    float: left; 
    width: 100%; 
    height: 50%; 
} 

#pp1{ 
    width: 50%; 
    height: 150px; 
    float: left; 
    background-color: red; 
} 

#pp2{ 
    width: 50%; 
    height: 150px; 
    float:right; 
    background-color: yellow; 
} 

#pgzone{ 

    background-image: url(screenfiles/bg.jpg); 
    background-size: cover; 
    border: 0px; !important 
}

來源

2016-11-16 Ezhno

張貼一些代碼，而不僅僅是圖片。但是，這很容易，所以我不太瞭解這個問題......？您可以使用@ media-queries來更改行爲，並更改所討論的兩個（好的，三個）div（所有藍色）的浮動和大小。紅色的都是一樣的，所以不需要改變。 – junkfoodjunkie

@junkfoodjunkie是的，我確實忘了代碼。我認爲這對圖2是可以的。但是我想知道如何在視頻和頁腳之間的空間內安裝兩個藍調div – Ezhno

'float：left;最大寬度：50％;'應該這樣做，真的。 – junkfoodjunkie

使用Flex盒。如果你給所有藍色的容器，並從1 flex-direction: column;更改爲2 flex-direction: row;，並添加一個容器爲淺藍色的和改變相反的方式，你有你想要的佈局。

來源

2016-11-16 07:20:16

謝謝喬喬。我的主要問題是讓兩個小藍調div適合頁腳和視頻，你有什麼建議嗎？ – Ezhno

CSS，DIV的響應

回答

相關問題