css弹性布局代码,

　　我在编写Elemin Theme(我最近设计的一个响应式网站)的时候，遇到的一个框架就是如何让嵌入的视频在大小变化上更加灵活。使用max-width:100%和height:auto可以让html5的视频标签很好地工作，但是这种解决方案不适合iframe或object标签的嵌入式代码。经过几个小时的查找资料和实验，我终于找到了解决办法。当你在做响应式设计时，这种css技能可以派上用场。灵活的html5 video标签

　　使用html5视频，您可以通过设置最大宽度：100%来使其灵活。在前面的介绍中，已经提到不适用于通用iframe和object中的嵌入式代码。复制代码如下：

　　视频{

　　最大宽度：100%；

　　高度：自动；

　　}灵活的Object Iframe 内嵌视频

　　这个技巧很简单。您需要为视频添加一个div容器，并将div的padding-bottom属性值设置在50%和60%之间。然后将子元素(ifame或object)的宽度和高度设置为100%，使用绝对定位。这将强制嵌入对象自动扩展到最大。CSS复制代码代码如下：视频容器{

　　位置：相对；

　　垫底：56.25%；

　　padding-top:30px；

　　高度：0；

　　溢出：隐藏；

　　}。视频容器iframe。视频容器对象。视频容器嵌入{

　　位置：绝对；

　　top:0；

　　左：0；

　　宽度：100%；

　　身高：100%；

　　}HTML复制代码代码如下：

　　div class="视频容器"

　　iframe src= http://player . vimeo . com/video/6284199？ width= 800 height= 450 frame border= 0 /iframe

　　/div在固定宽度下实现灵活性

　　如果视频的宽度有限，那么我们需要一个额外的div容器来包装视频，并为div设置一个固定的宽度和max-width:100%。

　　CSS复制代码如下：视频包装器{

　　宽度：600px

　　最大宽度：100%；

　　}

　　HTML复制代码如下：

　　div class=视频包装

　　div class="视频容器"

　　iframe src= http://player . vimeo . com/video/6284199？ width= 800 height= 450 frame border= 0 /iframe

　　/div

　　！-/视频-

　　/div

　　！- /video-wrapper -兼容性

　　这一招支持所有浏览器，包括：Chrome、Safari、Firefox、Internet Explorer、Opera、iPhone和iPad。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。