我正在创建一个具有固定高度布局（不使用弹性框）的网络应用程序，并且我也受到宽度的限制。
我想将屏幕从中间切开，并以大约 50% 的高度和宽度穿过中心。
在屏幕的左象限中，我不想插入 HTML5 视频播放器，而在右象限中，我想插入一些文本和图像。
我可以通过使用此处的 flex-video 中指定的技术来保持视频播放器的宽高比http://foundation.zurb.com/docs/components/flex-video.html
然而，这会随着视频溢出到屏幕的下半部分而中断。
无论如何我可以通过单独使用CSS来解决这个问题吗？
这是我到目前为止所拥有的
<!DOCTYPE html>
<head>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family:sans-serif;
color:white;
}
video {
height: 100%;
}
.header{
height: 60px;
background: #002442;
position: relative;
}
.media-card-screen{
background: linear-gradient(to bottom, #004680 0%, #00080f 99%);
position: absolute;
width: 100%;
top:60px;
bottom: 0px;
}
.media-card{
height: calc(100% / 1.75);
}
.video-container{
width: 50%;
display: inline-block;
padding: 20px 20px 0px 20px;
height: 100%;
}
.video{
display: block;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}
.title{
display: inline-block;
position: relative;
vertical-align: top;
height: 50px;
}
.title h1{
margin: 0;
padding: 0;
font-size: 26px;
}
.rating{
/*display: inline-block;
vertical-align: top;
position: absolute;
right: 0px;*/
}
.action-bar-container{
padding: 0;
margin-top: 20px;
list-style: none;
}
.action{
height: 50px;
line-height: 50px;
background: green;
margin: 0;
padding: 0;
}
.title-rating-container{
display:inline-block;
vertical-align: top;
width:49%;
position:relative;
overflow: auto;
height: 100%;
padding: 20px 20px 0px 0px;
}
.move-short-desc{
font-size: 18px;
}
.move-long-desc{
font-size: 18px;
}
.mc-action-bar{
-webkit-box-shadow: 0 2px 2px 0 black;
-ms-box-shadow: 0 2px 2px 0 black;
-moz-box-shadow: 0 2px 2px 0 black;
box-shadow: 0 2px 2px 0 black;
background: #004680;
height: 50px;
line-height: 50px;
text-align: left;
overflow: hidden;
white-space: nowrap;
padding: 0px 0px 0px 20px;
margin-top: 20px;
}
.more-like-this-bar{
height: 50px;
line-height: 50px;
background-color: rgba(0, 70, 128, 0.4);
}
.more-like-this-bar h3{
margin: 0px 0px 0px 20px;
padding: 0;
}
</style>
</head>
<body>
<div class="master-container">
<div class="header">
</div>
<div class="media-card-screen">
<div class="media-card">
<div class="video-container">
<div class="video">
<video id="video" controls="" preload="none">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>
</div>
</div>
<div class="title-rating-container">
<div class="title">
<h1>Captain Phillips</h1>
</div>
<img style="float:right; margin: 5px; width: 150px;" src="http://placehold.it/150x255">
<div class="rating">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Pg_cinema.png/626px-Pg_cinema.png" width="50" height="50">
</div>
<div class="expires">
<h3>Expires: 3hrs</h3>
</div>
<div class="duration">
<h3>Duration: 128mins</h3>
</div>
<div class="move-short-desc">
<p>The true story of Captain Richard Phillips and the 2009 hijacking by Somali pirates of the US-flagged MV Maersk Alabama, the first American cargo ship to be hijacked in two hundred years.</p>
</div>
<div class="move-long-desc">
<p>Two-time Academy Award winner Tom Hanks teams with Oscar-nominated director Paul Greengrass and screenwriter Billy Ray to tell the true story of Richard Phillips, a U.S. cargo-ship captain who surrendered himself to Somali pirates so that his crew would be freed. The MV Maersk Alabama was en route to Mombasa, Kenya, when it was surrounded and boarded by a gang of hardened bandits led by the determined Muse (Barkhad Abdi). As the crew of the Maersk Alabama rushed into a fortified "secure room" created for just such an incident, Phillips and Muse found themselves in a tense standoff that threatened to erupt into violence at any moment. Catherine Keener and Michael Chernus co-star. ~ Jason Buchanan, Rovi</p>
</div>
</div>
</div>
<div id="actionBar" class="mc-action-bar">
<div class="mc-action-button" data-call-to-action-button="buy">
<i class="icon-shopping-cart"></i><span>Buy</span>
</div>
<div class="mc-action-button" data-call-to-action-button="favourites">
<i class="icon-heart"></i><span>Remove From Favourites</span>
</div>
</div>
<div class="more-like-this">
<div class="more-like-this-bar">
<h3>MORE LIKE THIS</h3>
</div>
<div class="more-like-this-scroller-container">
</div>
</div>
</div>
</body>
</html>