CSS 2浮动Div的内部容器完全高度w /图像

Question

我有一个900px宽的容器，里面有2个浮动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获取左height的{​​{1}}

div

然后将var leftDivHeight = $('.span_2_of_3').height(); $('.span_1_of_3').css('height',leftDivHeight); 的内容包装到另一个inner div

div

然后将此css添加到垂直居中的内部<div class="col span_1_of_3 box2"> <div class='innerContent'> This is column 2 </div> <!-- added div --> </div>

div

<强> JSFIDDLE DEMO

Answer 2

这是你想要的吗？

body { margin:0; padding:0; }

.wrapper { border:1px solid green; width:900px; margin:0px auto; }

.content {
    width: 100%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
   /*left: 100%;   move the whole width of the image to the right */
    /* margin-left: -200%; magic! */
    float:left;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin:0;
}
.col:first-child { margin-left: 0; }

.box { background-color: #ccc; }
.box2 { background-color: red; }
/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 33.8%;
    height: 400px;
}
.content {
  position: relative;
  top: 50%;
  text-align:left;
    
}

<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">
        <div class="content">
	This is column 2
         </div>
	</div>
    
    <div style="clear:both;"></div>
    
</div>

Answer 3

我想，我或多或少找到了你想要的东西。虽然第二列不是全高，但它是垂直居中的，并且只需要它就可以了。

.wrapper {
            width: 900px;
            border: 1px solid #000000;
            display: inline-block;
        }

        .col img{
            display: block;
        }

        .content {
            vertical-align: middle;
            display: inline-block;
        }

        .box2 {
            display: inline-block;
            vertical-align: middle;
        }

<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 4

我有一个问题解决方案的解决方案demo，我认为它适合您。这是代码：

＆＃13;

＆＃13;

body { margin:0; padding:0; }

.wrapper {     
  border: 1px solid green;
  width: 900px;
  margin: 0px auto;
  /* background: #f00; */
  display: table;
  table-layout: fixed;}

.content {
  width: 100%; /* or whatever is required */
  text-align: center; /* ensures the image is always in the h-middle */
  overflow: hidden; /* hide the cropped portion */
}

img {
  position: relative; /* allows repositioning */
  left: 100%; /* move the whole width of the image to the right */
  margin-left: -200%; /* magic! */
}

/*  COLUMN SETUP  */
.col {
  display: table-cell;
  vertical-align: middle;
}
.col:first-child { margin-left: 0; }

.box { background-color: #ccc; }
.box2 { background-color: red; }
/*  GROUPING  */
.group:before,
.group:after {
  content:"";
  display:table;
}
.group:after {
  clear:both;
}
.group {
  zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
  width: 100%;
}
.span_2_of_3 {
  width: 66.1%;
}
.span_1_of_3 {
  width: 33.8%;
}
td{ background:#000; color:#fff;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;