html - CSS 2 Floating Div Inside Container 全高带/图像

Question

我有一个 900 像素宽的容器，里面有 2 个 float div。我需要使第 2 列背景全高并依赖于左侧的图像。第 2 列中的文本也需要垂直居中，同样基于图像高度。

https://jsfiddle.net/rj5o6n79/1/

<div class="wrapper">
   <div class="col span_2_of_3 content">
      <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
   </div>
   <div class="col span_1_of_3 box2">
      This is column 2
   </div>  
   <div style="clear:both;"></div>  
</div>

Answer 1

您可以使用jQuery 获取左侧div 的高度

var leftDivHeight = $('.span_2_of_3').height();
$('.span_1_of_3').css('height',leftDivHeight);

然后将你的 inner div 的内容包装到另一个 div

<div class="col span_1_of_3 box2">
    <div class='innerContent'> This is column 2 </div> <!-- added div -->
</div>

然后添加此 css 以垂直居中您的内部 div

.innerContent{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

JSFIDDLE DEMO