javascript - 如何在 css 中将侧边栏与 youtube 播放器对齐

Question

我使用 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 是什么吗？

任何帮助将不胜感激。提前致谢。

Answer 1

从包含视频的 aside 中删除 float 值。我在 aside 中添加了另一个类，如下所示:

<aside class="sidebar video-content">

还有CSS:

.video-content {
    float: none;
}

See my fiddle here.