Làm cách nào để căn chỉnh hai phần tử trong phần tử DIV?

Question

Tôi hiện đang thực hiện việc này với một bảng có 2 ô được căn chỉnh dưới cùng. Tôi ổn với giải pháp bảng, nhưng chỉ cần tự hỏi nếu điều này là có thể với (chỉ css và html, không có javascript).

Yêu cầu:
* Kích thước của văn bản và hình ảnh không xác định, nhưng chiều rộng kết hợp của cả hai sẽ không vượt quá chiều rộng của phần tử chứa. (ví dụ: nếu sau này tôi muốn thay đổi hình ảnh hoặc văn bản, tôi không muốn đi sâu vào tệp ccs)
* Hình ảnh được căn chỉnh bên trái và văn bản (trên thực tế, danh sách nằm ngang) được căn chỉnh sang bên phải .

Edit: Để đối phó với Kos,

• các kích thước của văn bản và hình ảnh năng động, được nó chiều cao hoặc chiều rộng, NHƯNG chiều rộng kết hợp của hai yếu tố sẽ không vượt quá chiều rộng của phần tử chứa.
  
• hình ảnh và văn bản phải được căn chỉnh dưới cùng
  
• phần tử chứa phải phù hợp chặt chẽ với phần tử cao nhất.

Answer 1

HTML

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

CSS

.wrapper { 
    position: relative; 
    width: 500px; 
} 

.image { 
    position: absolute; 
    display: block; 
    left:0; 
    bottom: 0; 
} 

.text { 
    position: absolute; 
    right:0; 
    bottom: 0; 
} 

EDIT: tôi đã thêm mã HTML thích hợp.

EDIT 2: Trong trường hợp chiều cao của wrapper là vô danh (chỉ hạn chế là .image luôn luôn phải được cao hơn .text)

CSS

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

.text { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

HTML

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

Answer 2

<div style="width:400px; overflow:visible; position:relative;"> 
    <img src="#" alt ="#" style="float:left;"/> 
    <p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p> 
</div> 

Answer 3

này nên làm việc tôi nghĩ:

HTML

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

CSS

.outer {display: inline-block; width: 350px; } 
.outer img {float: left;} 
.outer .text {float: right; }