这个经典小布局如何做到自适应？（让整体高度取决于文字的行数）

Question

如下图 一共有 三部分，一个外框div，一个图片div，一个文字div，

图片尺寸 和文字的多少都不是固定的，所以需要让它自适应。

要求：这三个div高度取决于文字有几行，即高度跟随文字的行数。
说明：文字是用br 折行的， 如果没br的时候文字就是一行，所有的div高度等于一行文字的高度。
文字div有多个br 时，所有的div自然都会变高。

目的就是 让整个布局 不留空白，紧凑。

Answer 1

你试着动态监听右侧的高度，然后赋值给左侧图片

Answer 2

我感觉你这个需求有些问题，如果图片按比例放大 父级的宽度不是会越来越大

Answer 3

  .box {
    width: fit-content;
    padding: 10px;
    background-color: red;
    display: flex;
    justify-content: center;
  }
  
  .left img{
  height: 100%
  }

Answer 4

怎么框子听起来这么别扭呢,可以把子去掉吗

flex实现

• 横向伸缩
• 主轴设置两段对齐

grid实现

• 一行两列
• 高度随内容增加
• 单元格两段对齐

绝对定位实现

• 父元素相对定位
• 图片绝对定位,上下为0

标准流式布局实现

• 图片做为背景放在左边
• 父元素调试为auto

Answer 5

利用bfc，兼容性好：

<div class="wrap">
  <img src="" alt="">
  <p>dsahjdhsadsajkdhsjak</p>
</div>

.wrap {
  background:red;
  width: 1000px;
}
img {
  display: block;
  float: left;
}
p {
  overflow: hidden;
}

Answer 6

1、在预设图片的宽度的情况下：
<div class="wrapper">

<img class="image" />
<div class="text">
</div>

</div>
.wrapper {

position: relative;
background-color:red;

}
.image {

 position:absolute;
 top:0;
 left:0;
 width: 20px;
 height: 100%;

}
.text {

width:calc(100% - 20px)；
margin-left:20px;

}
2、使用弹性布局：
.wrapper {

display:flex;
flex-wrap:no-wrap;
background-color:red;

}
.image {

 flex:0 0 20px;

}
.text {

flex:1 1 calc(100% - 20px);

}
这种情况下弹性元素的高度等于所在行中最高的弹性元素的高度
第二种情况可能不太符合你的要求，请参考