Html 如何在DIV元素中底部对齐两个元素？

我目前正在使用一个包含2个底部对齐单元格的表来执行此操作。我对表格解决方案没什么意见，但我想知道这是否有可能（只有css和html，没有javascript）

要求：
*文本和图像的大小未知，但两者的组合宽度不会超过包含元素的宽度。（例如，如果我以后想更改图像或文本，我不想深入ccs文件）
*图像向左对齐，文本（实际上是一个水平列表）向右对齐

编辑：响应Kos

• 文本和图像的大小是动态的，无论是高度还是宽度，但两个元素的组合宽度不会超过包含元素的宽度
  
• 图像和文本应底部对齐
  
• 包含的元素应与最高的元素紧密配合
  HTML

  <div class="wrapper">
      <img src="" class="image" />
      <p class="text">Hello world!</p>
  </div>
  

  <div class="wrapper">
      <img class="image" src="" />
      <p class="text">
          Hello world!
      </p>
  </div>
  

  编辑：我添加了适当的HTML代码
  编辑2:以防包装高度未知（唯一的限制是.image始终高于.text）
  CSS

  .wrapper {
      position: relative;
      width: 500px;
  }
  
  .image {
      position: absolute;
      display: block;
      left:0;
      bottom: 0;
  }
  
  .text {
      position: absolute;
      right:0;
      bottom: 0;
  }
  

  .wrapper {
      position: relative;
      width: 500px;
  }
  .image {
      vertical-align: bottom;
  }
  
  .text {
      position: absolute;
      right: 0;
      bottom: 0;
  }
  

  HTML

  <div class="wrapper">
      <img src="" class="image" />
      <p class="text">Hello world!</p>
  </div>
  

  <div class="wrapper">
      <img class="image" src="" />
      <p class="text">
          Hello world!
      </p>
  </div>
  

  
  
  你好，世界！
  
  

  
  Lorem Ipsum
  
  

  我认为这应该行得通：
  HTML

  <div class="outer">
    <img src="" title="" />
    <div class="text">Some text </div>
  </div>
  

  ---

  这正是我要做的。包装的高度如何？这在Chrome或IE9中似乎不起作用，除非知道div.wrapper的高度。这很好，谢谢。但正如休伊特和莫克所说，如果不指定高度，它就不起作用。如果没有指定高度，有几种方法可以解决这个问题，但是如果你没有提到其他限制，你需要更具体一些。我编辑了我的答案，并给出了一个解决方案，要求你左边的图像总是高于右边的文本，从你的描述来看，情况总是如此。你的描述不够清晰-你没有提到什么是动态的，什么是静态的，什么取决于什么。黑色边框是否应垂直缩放以匹配图像？它的高度是否恒定，图像是否应缩放？还是也下联？等等，等等。我确实说过，元素的大小在时间之前是未知的。但我编辑它是为了让它更清楚。