Alttaki tablo hücresindeki div nasıl hizalanır?

Question

İkinci divın içeriğinin resimle alt hizalı olmasını istiyorum.

<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

senin resmin sağ alt hizalanmış alacak özellikleri.

Ben doğrusu satır içi ekleyerek daha ayrı bir CSS dosyası veya gömme hakkında tasarımı yapmak öneririm rağmen

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

. Örnek:

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

altta metni olmasını istiyorsanız , aynı zamanda merkezli, sen text-align: center ekleyebilir.

Answer 2

ikinci div için margin-top ekleyin ve Sen table ve table-cell ekranlı yapabilirsiniz

<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

Masanın içine display: table-celldiv elementler ekleyebilir:

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

deneyin bu bir:

<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