我正在尝试使用没有内容的div来模拟屏幕小于800像素时的链接中断,并且当我缩小浏览器时它工作正常,但是当我再次放大它时,div仍在模拟换行而不是不显示,我不知道它为什么不起作用。
<div id="container">
<div id="container-row">
<div id="container-current">
<!-- Sets up the container for the video -->
<video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
<!-- Location of the video -->
<source src="sun1.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>
<!-- Location of the video -->
<source src="sun1.mp4" type='video/mp4' />
</video>
</div>
<div id="container-inactive">
<div class="image-row">
<div class="image-cell">
<img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
</div>
<div class="image-cell">
<img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
</div>
<div class="image-break"></div>
<div class="image-cell">
<img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
</div>
<div class="image-cell">
<img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder">
</div>
</div>
</div>
</div>
</div>
.video-js .vjs-tech {
height:100% !important;
position: relative !important;
}
body, html {
margin:0;
padding:0;
background-color:black;
}
#container {
margin:0;
padding:0;
}
#container-current {
width:50%;
margin:0 auto;
}
#container-inactive {
width:100%;
display:table;
border-collapse:separate;
border-spacing:10px 30px;
}
.image row {
display:table-row;
}
.image-cell {
display:table-cell;
}
.image-cell img {
width:100%;
}
.image-break {
display:none;
}
@media only screen and (max-width: 800px) {
.image-break {
display:block;
}
}
对于视频显示,我使用video.js