我使用 html5、css 和 js 创建了简单的网页。
我创建了侧边栏,第一个部分是登录表单,另一个部分是视频播放器。
这是两者的 html5 代码:
<aside class="sidebar">
<div class="inside">
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
</div>
</form><!-- form -->
</section><!-- content --></div>
</aside>
<aside class="sidebar">
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</aside>
这是CSS:
/* aside */
aside {
float: left;
max-width: 100px;
margin-top:320px;
height: 200px;
}
.inside {
background-color: #000;
color:#fff;
position:relative;
}
.sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
现在我的页面看起来像这样:http://postimg.org/image/mrse2fyep/
我想在登录表单的底部显示视频播放器。但它显示在登录表单附近。
我可以知道修复它的 css 是什么吗?
任何帮助将不胜感激。提前致谢。
最佳答案
从包含视频的 aside
中删除 float
值。我在 aside
中添加了另一个类,如下所示:
<aside class="sidebar video-content">
还有CSS:
.video-content {
float: none;
}
关于javascript - 如何在 css 中将侧边栏与 youtube 播放器对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26581371/