टेबल सेल

Question

के अंदर नीचे div को संरेखित कैसे करें मैं चाहता हूं कि दूसरे div की सामग्री छवि के साथ नीचे गठबंधन हो।

<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

आप table और table-cell प्रदर्शन के साथ ऐसा कर सकते हैं गुण।

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

हालांकि मैं आपको एक अलग सीएसएस फ़ाइल या यह एम्बेड करने पर स्टाइल करते हैं, बल्कि यह इनलाइन जोड़ने से सुझाव देना चाहेंगे। उदाहरण:

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

आप नीचे पाठ करना चाहते हैं, लेकिन यह भी केंद्रित है, आप text-align: center जोड़ सकते हैं।

Answer 2

अपने दूसरे div करने के लिए मार्जिन टॉप जोड़ें और यह अपनी छवि के सही नीचे करने के लिए गठबंधन किया जाएगा

<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

आप तालिका के अंदर display: table-celldiv के तत्वों को जोड़ने कर सकते हैं:

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

करने का प्रयास करें यह एक:

<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