网页不适合屏幕

时间:2016-03-20 01:04:04

标签: html css

我需要将页面加载到1280宽度的res。它应该加载所以没有水平滚动条出现....这在“视频”页面上,我将在下面链接。如何修复我的页面以使其适合屏幕?我尝试了一些小调整,这让页面变得疯狂。谢谢!

HTML:

<section class="left">  
    <h1>Video</h1>
    <article>
        <h2>Video implementation in HTML5</h2>
        <p>Support for HTML5 video has been growing steady. In June 2013, Netflix added support for HTML5 video. In January 2015, YouTube turned to HTML5 video as it's default player over Flash. In December 2015, Facebook switched from Flash to HTML5 for all video content. The Flash plugin is widely assumed,  including by Adobe, to be destined to be phased out, which will leave HTML5 video as the only widely supported method to play video on the World Wide Web.</p>
    </article>
    <article class="divider">
        <h2 class="elegantshadow">The single biggest reason why startups succeed</h2>
        <p>Bill Gross has founded a lot of startups, and incubated many others — and he got curious about why some succeeded and others failed. So he gathered data from hundreds of companies, his own and other people's, and ranked each company on five key factors. He found one factor that stands out from the others — and surprised even him.</p>
        <figure>
            <video  controls="controls">
                <source src="BillGross.mp4" max-width="200" type="video/mp4"/> 
                <source src="BillGross_VP8.webm" type="video/webm" />Your browser does not support the video tag / type
            </video>
        </figure>           
    </article>
</section>

CSS:

.container {
    display: flex;
}
aside {
    width: 30%;
}
section.left {
    width: 70%;
}
video {
    display: block;
    margin: 0 auto;
}

1 个答案:

答案 0 :(得分:0)

检查这个

.container {
display: flex;
}

section.left {
 width: 100%;
}

 video{
    display: block;
    margin: 0 auto;
}