Question

我正在努力应对响应式布局......

What I want to achieve 在上图中，红色是HTML5视频＆amp;蓝色是图像。我正在使用JavaScript来响应HTML5视频 - //vjs.zencdn.net/4.12/video.js

但是我把它放在了外面，无论是Firefox还是Chrome＆amp; IE在图像2和图像下面有1px线。 4（Firefox）或5（IE＆amp; Chrome）。

请在此处查看jsfiddle.net代码...

<div id="container">
    <div id="col_left">
        <img src="http://lorempixel.com/g/220/205/"/>
        <img src="http://lorempixel.com/g/220/270/" class="has_top_margin" />
    </div>
    <div id="col_center">
        <video id="example_video_1" class="video-js vjs-default-skin" poster="" data-setup='{"controls": false, "autoplay": true, "preload": "auto"}'>
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
        </video>
        <img src="http://lorempixel.com/g/480/207/" class="has_top_margin" />
    </div>
    <div id="col_right">
        <img src="http://lorempixel.com/g/220/205/" />
        <img src="http://lorempixel.com/g/220/270/" class="has_top_margin" />
    </div>
    <div style="clear:both"></div>
</div>

有人建议使用代码来完成这项工作吗？我不介意合并图像1/2＆amp; 3/4如果它更容易......但它必须是响应性的＆amp;必须填补高度。

编辑：已更新Fiddle

Answer 1

是的，首先，尝试保持CSS和HTML分离。内联CSS非常混乱，当您使用它时会导致不必要的问题。

语义HTML和CSS的重点是分离文档结构和造型，所以放置是没有意义的直接在HTML文档中设置样式。记得永远保持你的样式表中的样式属于它们。

因此，您应该始终尝试在<head>标记中添加如下所示的行：

<link type="text/css" rel="stylesheet" href="/path/to/style.css">

对于页面本身，请尝试：

＆＃13;

* {
  color: white;
  text-align:center;
}

#content, #sidebar_left, #sidebar_right {
  height:500px;
}

#sr1, #sl1, #sr2, #sl2 {
  height:100px;
  background:blue;
}

#sr1, #sl1 {
  height:30%;
  margin: 10px;
}

#sr2, #sl2 {
  height:70%;
  margin: 10px;
}

#c1{
  background:red;
  height:50%;
  margin:10px;
}

#c2 {
  background:blue;
  height:50%;
  margin:10px;
}

#sidebar_left {
  float:left;
  width:20%;
}

#content {
  width:60%;
  float:left;
}

#sidebar_right {
  float:left;
  width:20%;
}

＆＃13;

<div id="page">
  <div id="sidebar_left">
        <div id="sl1">Column 1</div>
        <div id="sl2">Column 2</div>
  </div>
  <div id="content">
    <div id="c1">Video</div>
    <div id="c2">Column 5</div>
  </div>
  <div id="sidebar_right">
        <div id="sr1">Column 3</div>
        <div id="sr2">Column 4</div>
  </div>

</div>

＆＃13;

<强>的jsfiddle：<！/强>

Here's a jsfiddle so you can play with the width.

编辑：如果您使用的是<img>代码，请将以下内容添加到您的CSS中，并且图片底部不会有填充：

img {
    display: block;
}

Fiddle

Answer 2

感谢你帮助Rizky！

我被骗了＃39; ＆安培;使用背景图像来实现这个目的......

HTML

<div class="homepage_container">
    <img src="/images/video_background.jpg" alt="" usemap="#links_map" />
    <map name="links_map">
        <area shape="rect" coords="0,225,220,496" href="/link1">
        <area shape="rect" coords="740,225,960,496" href="/link2">
    </map>
    <div class="homepage_video_container">
        <video id="example_video_1" class="video-js vjs-default-skin" poster="" data-setup='{"controls": false, "autoplay": true, "preload": "auto"}'>
            <source src="videofile.mp4" type="video/mp4" />
            <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>
    </div>
</div>

CSS

.homepage_container {position:relative}
.homepage_video_container {position:absolute; top:0; left:25%; width:50%}

然后，制作HTML＆amp;使用插件响应的Imagemap：https://github.com/videojs/video.js/和https://github.com/stowball/jQuery-rwdImageMaps

我希望这有助于其他人...

响应式布局包含HTML5视频

2 个答案: