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

叁歲伎倆 2021-08-30 01:34 315阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70]: /images/20210813/c575f6bb06b443f8836c337204b1a543.png