Cách căn chỉnh div ở dưới cùng bên trong ô bảng

Question

Tôi muốn nội dung của div thứ hai được căn chỉnh dưới cùng với hình ảnh.

<table> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <div style="float: left;"> 
 
      <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;"/> 
 
     </div> 
 
     <div style="float: right; vertical-align: bottom;"> 
 
      I want this text be on the same line as the bottom of the image 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

Bạn có thể làm điều này với màn hình hiển thị table và table-cell tính chất.

<table> 
 
    <tr> 
 
    <td> 
 
     <div style="display:table"> 
 
     <div style="display:table-cell"> 
 
      <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;"/> 
 
     </div> 
 
     <div style="vertical-align: bottom; display: table-cell"> 
 
      I want this text be on the same line as the bottom of the image 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Mặc dù tôi muốn đề nghị bạn làm như phong cách trên một tập tin CSS riêng biệt hoặc nhúng nó, thay vì thêm nó inline. Ví dụ:

.outer { 
 
    display: table; 
 
} 
 

 
.inner { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div class="outer"> 
 
     <div> 
 
      <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;"/> 
 
     </div> 
 
     <div class="inner"> 
 
      I want this text be on the same line as the bottom of the image 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Nếu bạn muốn có văn bản ở phía dưới, mà còn làm trung tâm, bạn có thể thêm text-align: center.

Answer 2

Thêm margin-top để div thứ hai của bạn và nó sẽ được liên kết đến dưới cùng bên phải của hình ảnh của bạn

<div style="float: right; vertical-align: bottom; margin-top:135px;"> 
      I want this text be on the same line as the bottom of the image 
</div> 

Answer 3

Bạn có thể thêm display: table-cell để div yếu tố bên trong bảng:

table tbody tr td div div { 
 
    display: table-cell; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <div> 
 
      <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;" /> 
 
     </div> 
 
     <div style="vertical-align: bottom;"> 
 
      I want this text be on the same line as the bottom of the image 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 4

Vui lòng thử này một:

<table> 
 
    <tr> 
 
    <td> 
 
     <div style="display:table"> 
 
     <div style="display:table-cell"> 
 
      <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="max-width: 200px; max-height: 200px;"/> 
 
     </div><br> 
 
     <div style=" vertical-align: bottom;display: table-cell "> 
 
      I want this text be on the same line as the bottom of the image 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

DEMO