坚固地保持两个div垂直分开

Question

确保图像和文字以完全响应的方式彼此垂直分离的规范方法是什么？

看看这个：

通过将图片和文字放在单独的divs中，指定width并确保display:block-inline，我可以创建以下内容：

但这并不是完全响应。怎么样？例如，对于非常小的尺寸（我必须支持的尺寸），图像和文本如下所示相互碰撞：

必须有一种方法可以使它们沿任何屏幕尺寸垂直分开。也许我应该使用表格？

请提供一个说明性示例，最好使用支持良好的CSS 2.1属性，因为我需要提供的大量客户端是没有CSS3或JS支持的Opera Mini浏览器。

我的代码是：

<div style="background-color:#E1F5FE;border-radius:10px;padding:10px;overflow:hidden;">
    <div style="width:20%;display:inline-block;">
        <img src="X.png">
    </div>
    <div style="width:80%;display:inline-block;float:right;text-align:center;">
        Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte
    </div>
</div>

这是给出类似SO question的答案的变体。它并没有真正解决我的问题。

Answer 1

只需为图片添加width:100%

即可

但请检查整个css，在小屏幕上最好将div显示在彼此之下

.main{
  background-color:#E1F5FE;
  border-radius:10px;
  padding:10px;
  overflow:hidden;
}
.main > div{
  display:inline-block;
  float:left;
  text-align:center;
}
.imgDiv{
  width:20%;
}
.textDiv{
  width:80%;
}
.imgDiv > img{
  width:100%;
}

@media screen and (max-width: 450px) {
  .imgDiv{
    margin: 0 0 20px 25%;
    width:50%;
  }
  .textDiv{
    width:100%;
  }
}

<div class="main">
  <div class="imgDiv">
      <img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg" style="width:100%">
  </div>
  <div class="textDiv">
      Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte
  </div>
</div>

Answer 2

以下是使用flex和flex-wrap: wrap来处理响应大小调整的解决方案。在小尺寸时，图标和文本将垂直堆叠，而在较大尺寸下，图标和文本将水平对齐。

Flex has great support these days，即使您提到的浏览器也是如此。

.main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.imgDiv {
  flex: 1 1;
  min-width: 80px;
  text-align: center;
  
}

.imgDiv > img {
  width: 80%;
  height: auto;
  max-width: 150px;
  line-height: 0px;
}

.textDiv {
  flex: 1 1 250px;
  display: flex;
}

.textDiv > p {
  flex: 1 0 0px;
  padding: 0;
  margin: 0;
  align-self: center;
}

<div class="main">
  <div class="imgDiv">
      <img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg">
  </div>
  <div class="textDiv">
    <p>Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte</p>
  </div>
</div>