Come allineare div sul fondo della cella di tabella

Question

Voglio che il contenuto del secondo div sia allineato in basso con l'immagine.

<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

Si può fare questo con il display table e table-cell proprietà.

<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>

Anche io suggerisco di fare lo stile su un file CSS separato o incorporarlo, anziché aggiungerlo in linea. Esempio:

.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>

Se si desidera avere il testo in fondo, ma anche al centro, è possibile aggiungere text-align: center.

Answer 2

Aggiungi margin-top per la vostra seconda div e otterrà allineato in basso a destra dell'immagine

<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

È possibile aggiungere display: table-cell a div elementi all'interno della tabella:

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

Si prega di provare questo:

<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