html - 稳健地保持两个 div 垂直分离

Question

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

看看这个:

通过将图像和文本放在单独的 div 中，指定 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>