CSS 2浮动div在完整高度容器内与图像一起使用

Question

我有一个宽度为900像素的容器，其中包含两个浮动div。我需要使列2的背景全高，并依赖于左侧的图像。列2中的文本也需要根据图像高度垂直居中显示。 这里是详细内容。

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

- tebrown

Answer 1

你可以使用 jQuery 来获取左侧 div 的 height。

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

然后将您的内部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演示

- Dyrandz Famador

---

感谢您的回复。看起来它对于多个推荐信不起作用。这是我的jsfiddle链接... https://jsfiddle.net/71dsfrk5/5/ - tebrown

@user1628845，像这样吗？https://jsfiddle.net/wytndhyx/1/。但是两个div之间有很大的空隙...如果您使用`display: table来处理您的div`，那么这将变得非常容易。 - Dyrandz Famador

为什么会出现白色空格？使用显示表是否意味着取消进程？ - tebrown

@user1628845，既然你正在使用类，那么你需要指定它属于哪个索引... https://jsfiddle.net/wytndhyx/2/ - Dyrandz Famador

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>

- Yon Glory

---

OP希望实现以下功能：“我需要使第二列的背景高度充满整个屏幕，并且依赖于左侧的图像”，因此第二列的高度必须是动态的。 - Dyrandz Famador

感谢您的回复。我想避免在类.span_1_of_3下设置高度，因为我需要具有不同高度的多个推荐信。https://jsfiddle.net/71dsfrk5/5/ - tebrown

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>

- Patrick Ziegler

Answer 4

我有一个解决您问题的方案，请查看演示, 我认为这对您有效。这是代码:

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

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

- Navtosh Adhikari