关于左右布局，一边高度不定，另一边和不定高度等高的CSS布局

百度上大部分都说设置负padding和负margin值来解决这个问题，事实上这个方法书上就能查到，而且是比较简单的方法，我这里提供另外一种百度不到的方法以及一种更简易的方法，第一种方法利用absolute的垂直文档流自适应属性。想了解absolute的水平垂直文档流自适应的可以参考我CSS的文章，大概是讲absolute那几篇。下面来看解题思路，看下图：

图中的左边是一张图，右边是一段固定的文字，为什么固定的文字不定高呐？因为手机屏幕分辨率的问题，固定的文字也可能不定高。现在我们要让左边的图片高度等于右边文字的高度。

absolute方法代码：

//父容器
.fatherCtn{
  position:relative;
}
.leftCtn{
  position: absolute;
  width: 48%;
  top: 0;
  bottom: 0;
  img{
    height: 100%;
    width: 100%;
  }
}
.rightCtn{
  display: block;
  margin-left: auto;
  width: 48%;
}

利用flex，stretch属性（默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。）

//父容器
.fatherCtn{
  display: flex;
  align-items: stretch;
}
.leftCtn{
  width: 48%;
  img{
    height: 100%;
    width: 100%;
  }
}
.rightCtn{
  width: 48%;
}