Question

我在容器div中有两个div，我希望img_box div匹配content_con div的高度，具体取决于它的高度。因此，如果content_con div有三个段落并且content_con的高度为303像素，则让它保持不变;我希望img_box div匹配那个高度。合理？我如何在CSS中做到这一点？

简而言之，img_box和content_con匹配高度，具体取决于哪个具有更大的高度。见下文见vis：

<div class="box_container">
  <div class="img_box"></div>
  <div class="content_con"><div>
</div>


.box_container
----------------------------------------------
             |
   .img_box  |  .content_con
             |
----------------------------------------------

Answer 1

无论div中有多少数据，您都可以通过以下方法执行此操作。但div s的高度相等。

.box_container{display:table;width:100% }
.img_box, .content_con{display:table-cell; vertical-align:top; width:50%}
.img_box{background:red;}
.content_con{background:yellow;}

这是一个演示，看看它的外观：

http://jsbin.com/hidicoma/1/

Answer 2

这是实现相等高度列的另一种方法。这适用于三列布局（仅限于将样式应用于父容器，[父容器]：之前和[父容器]：之后）。否则你需要额外的容器。

.box_container {
    position: relative;
    z-index: 1;
    width: 100%;   
    background: yellow;
    overflow: hidden;
}
.img_box, .content_con {
   float: left;
   width: 50%;
   position: relative;
}
.img_box > *, .content_con > * {
    padding: 0 10px;
}
.box_container:before {
    background: red;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: -1;
}

http://jsfiddle.net/4Z8np/39/

如何获得两个相同高度的div，具体取决于CSS中哪一个具有更大的高度

2 个答案: