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的响应

回答

相关问题