在两个div中对元素设置等高。

Question

你可以在这个演示中看到，我有一个视频坐在一些文本旁边：http://fiddle.jshell.net/u9t48jpc/show/light/

是否有可能将视频区域拉伸到文本块达到的高度？

​

// poster frame click event
$(document).on('click', '.js-videoPoster', function(ev) {
  ev.preventDefault();
  var $poster = $(this);
  var $wrapper = $poster.closest('.js-videoWrapper');
  videoPlay($wrapper);
});

// play the targeted video (and hide the poster frame)
function videoPlay($wrapper) {
  var $iframe = $wrapper.find('.js-videoIframe');
  var src = $iframe.data('src');
  // hide poster
  $wrapper.addClass('videoWrapperActive');
  // add iframe src in, starting the video
  $iframe.attr('src', src);
}

// stop the targeted/all videos (and re-instate the poster frames)
function videoStop($wrapper) {
  // if we're stopping all videos on page
  if (!$wrapper) {
    var $wrapper = $('.js-videoWrapper');
    var $iframe = $('.js-videoIframe');
    // if we're stopping a particular video
  } else {
    var $iframe = $wrapper.find('.js-videoIframe');
  }
  // reveal poster
  $wrapper.removeClass('videoWrapperActive');
  // remove youtube link, stopping the video from playing in the background
  $iframe.attr('src', '');
}

.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
}
.videoWrapper43 {
  padding-top: 75%;
}
.videoWrapper169 {
  padding-top: 56%;
}
.videoIframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.videoPoster:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 5px solid #fff;
  border-radius: 100%;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  border-left: 40px solid #fff;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:hover:before,
.videoPoster:focus:before {
  border-color: #f00;
}
.videoPoster:hover:after,
.videoPoster:focus:after {
  border-left-color: #f00;
}
.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  -moz-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}
body {
  font-family: avenir, sans-serif;
}
main {
  max-width: 800px;
  margin: 20px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- the class "videoWrapper169" means a 16:9 aspect ration video. Another option is "videoWrapper43" for 4:3. -->
      <div class="videoWrapper videoWrapper169 js-videoWrapper">
        <!-- YouTube iframe. -->
        <!-- note the iframe src is empty by default, the url is in the data-src="" argument -->
        <!-- also note the arguments on the url, to autoplay video, remove youtube adverts/dodgy links to other videos, and set the interface language -->
        <iframe class="videoIframe js-videoIframe" src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/hgzzLIa-93c?autoplay=1& modestbranding=1&rel=0&hl=sv"></iframe>
        <!-- the poster frame - in the form of a button to make it keyboard accessible -->
        <button class="videoPoster js-videoPoster" style="background-image:url(http://i2.wp.com/www.cgmeetup.net/home/wp-content/uploads/2015/05/Avengers-Age-of-Ultron-UI-Reel-1.jpg);">Play video</button>
      </div>
    </div>
    <div class="col-md-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut odio nec nisl hendrerit gravida. Mauris nec neque ante. Quisque rutrum mauris sed mauris consectetur iaculis. Sed sit amet consequat metus, sodales vehicula diam. Integer sit amet sagittis
      nulla. Cras venenatis arcu mauris, malesuada congue diam pharetra nec. Sed tincidunt, quam sit amet congue varius, ex est vehicula libero, at tincidunt diam arcu sed felis. Mauris eleifend rutrum velit id porttitor. Suspendisse sit amet turpis ut
      enim maximus consequat. Vestibulum rhoncus, sem ut ullamcorper dapibus, tellus elit gravida nibh, quis tempus orci libero a tellus. Sed pellentesque pulvinar rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
      egestas. Suspendisse in ultrices libero. Nulla ut pharetra leo. Proin sit amet aliquam tortor, in porttitor urna. Donec vitae sem auctor, laoreet nunc at, interdum elit. Phasellus molestie, est non faucibus accumsan, leo magna lobortis orci, non
      condimentum metus dolor at nisi. Sed pharetra pretium lacus at congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce a tempor quam. Quisque porta dui enim. Suspendisse non porttitor nunc, tempus
      dignissim risus. Donec ac orci eu sapien fermentum faucibus ut eget tellus. Pellentesque lectus sapien, gravida non quam quis, dictum consequat justo. Donec vel nisi ultricies, cursus est eget, elementum sapien. Quisque sit amet auctor leo. Phasellus
      lorem urna, aliquam a diam non, ornare pulvinar erat. Fusce laoreet quam ut tempor tristique. In quis imperdiet libero. Donec non efficitur urna, quis semper justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis
      in faucibus orci luctus et ultrices posuere cubilia Curae;
    </div>
  </div>
</div>

​

Answer 1

这里是你需要做的

在页面标题标记中添加匹配高度库cdn脚本标记：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

接下来，添加在视频和文本列中匹配的css类：

<div class="col-md-6 matched">

接下来，添加黑色背景css类以应用于视频行，并仅将其应用于视频div列：

.blackbg {
  background-color:black;
}

<div class="col-md-6 matched blackbg">

接下来，让我们调用matchHeight()方法来匹配颜色的高度，如下所示：

放置以下jquery语句

$('.matched').matchHeight();

在$(document).on('click','.js-videoPoster',function(ev) {线之前。

最后，在css中编辑以下css样式：

在.videoWrapper类中。删除position:relative;属性。

在.videoPoster:after类中。将margin:编辑为值-25px 0 0 -13px

所有这些更改都将使视频行与文本行的高度相匹配，并且视频初始图片看起来可能会放大，但当您播放视频时，播放机将处理视频本身的纵横比。

使用您的代码和我的建议的示例：T/pen/PbYmrz

编码愉快。