Question

<div class="row container-row">
<div class="col-md-8 col-xs-12 no-padding-column">
    <div class="video-container">
        <img class="video-image" src="image.jpg">
        <a href="#" class="js-play-video">
            <img class="play-image" src="play.png">
        </a>
    </div>
</div>
<div class="col-md-4 col-xs-12 no-padding-column">
    <div class="text-content">
        <h1>Superious Quality</h1>
        <p>sometext</p>
    </div>
</div>
</div>

以下是我的风格

.panel-container {
  color: #fff;
  height: auto;
  position: relative;
  margin: 0px auto;
}
.panel-container .container-row {
  margin: 5%;
}
.panel-container .container-row .no-padding-column {
  padding-right: 0px;
  padding-left: 0px;
}
.panel-container .video-container {
  display: block;
  position: relative;
}
.panel-container .video-container .video-image {
  width: 100%;
}
.panel-container .play-image {
  position: absolute;
  width: 13%;
  height: auto;
  top: 50%;
  left: 57%;
  margin-left: -12%;
  margin-top: -6%;
}
.panel-container .text-content {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
  height: 381px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
@media (max-width: 30em) {
  .panel-container .text-content {
    height: auto;
  }
}
.panel-container .text-content h1 {
  color: #fff;
}

我希望文本内容与视频容器具有相同的高度。请注意，视频容器的高度不是固定的，而是由图像大小定义的，并且在浏览器调整大小时会调整大小。如何使文本内容可以调整大小以始终与视频容器对齐（高度）？

Answer 1

一种解决方案是使 .container-row 和 .text-content 具有相同的背景颜色。代码：

.panel-container {
  color: #fff;
  margin: 0px auto;
}
.panel-container .container-row {
  background: #666666;
  margin: 5%;
}
.panel-container .container-row .no-padding-column {
  padding-right: 0px;
  padding-left: 0px;
}
.panel-container .video-container .video-image {
  width: 100%;
}
.panel-container .play-image {
  position: absolute;
  width: 13%;
  height: auto;
  top: 50%;
  left: 57%;
  margin-left: -12%;
  margin-top: -6%;
}
.panel-container .text-content {
  padding: 0 15px;
  float: left;
  color: #fff;
}
.panel-container .text-content h1 {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid panel-container">
  <div class="row container-row">
    <div class="col-xs-8 no-padding-column">
      <div class="video-container">
        <img class="video-image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
        <a href="#" class="js-play-video">
          <img class="play-image" src="http://uxrepo.com/static/icon-sets/iconic/svg/play-circle2.svg" />
        </a>
      </div>
    </div>
    <div class="col-xs-4 no-padding-column">
      <div class="text-content">
        <h1>Superious Quality</h1>

        <p>sometext</p>
      </div>
    </div>
  </div>
</div>

我知道这不是正确的做法，而且它没有回答这个问题，但它适用于行为。

Answer 2

要调整两个相同高度的div，我所做的只是添加

float: left;

到css类 .no-padding-column

.panel-container .container-row .no-padding-column {
  padding-right: 0px;
  padding-left: 0px;
  float: left;
}

我试图在fiddle中重现您的情况。请注意，我删除了.panel-container类，因为它不在您的代码中。我不确定这门课程在哪里，它也可能会引起问题，如果我的小提琴作为预期的那样工作，请告诉我。如果仍然存在问题，您是否可以添加.panel-container类？（也许是来自互联网而不是本地的图像？这会让我们更容易）

对于那些想要调整第二个div的高度的人，取决于第一个div的变化：

为此，您可以使用JS框架"attrchange"。将JS文件添加到您的页面并使用以下代码。

$(".video-container").attrchange({
        trackValues: true, // set to true so that the event object is updated with old & new values
        callback: function(event) {
            if(event.attributeName == "height") { // which attribute you want to watch for changes
                $(".text-content").css('height', event.newValue);
            }
        }
    });

Answer 3

我实际上在a link上使用了Reflex，但它没有被广泛使用。我不确定使用该网站进行制作是否正确。如果有更好的选择，请告诉我。

Answer 4

我发布了我发现您可能也感兴趣的解决方案。

这是codepen link！

<div class="table-wrapper">
   <div class="table-row">
     <div class="table-column short-column">
       <div class="content-container">
         <p>Short Column</p>
       </div>
       <div class="button-row">
        <button>Click Me</button>
       </div>
    </div>
    <div class="table-column medium-column">
      <div class="content-container">
        <p>Medium Column</p>
        <p>Medium Column</p>
        <p>Medium Column</p>
      </div>
      <div class="button-row">
       <button>Click Me</button>
      </div>
   </div>
   <div class="table-column long-column">
      <div class="content-container">
        <p>Long Column</p>
        <p>Long Column</p>
        <p>Long Column</p>
        <p>Long Column</p>
        <p>Long Column</p>
        <p>Long Column</p>
        <p>Long Column</p>
      </div>
    <div class="button-row">
     <button>Click Me</button>
    </div>
</div>

可调整大小的容器在同一级别

4 个答案: