सीएसएस: पाठ ऊपर और सेल

Question

की तह तक मान लीजिए कि मैं इस तरह कोड करते गठबंधन:

<table> 
<tr> 
    <td> 
     <div id="top">top</div> 
     <div id="bot">bottom</div> 
    </td> 
</tr> 
</table> 

मैं सीएसएस के माध्यम से नीचे करने के लिए सेल और #bot के शीर्ष करने के # शीर्ष संरेखित करने के लिए कोशिश कर रहा हूँ ।

#top { vertical-align:top; } 
#bot { vertical-align:bottom; } 

उपर्युक्त काम नहीं लगता है - ऐसा वास्तव में कोई प्रभाव नहीं पड़ता है। यहां कोड का एक लिंक दिया गया है: http://jsfiddle.net/vKPG8/28/

यह क्यों हो रहा है और यह कैसे तय किया जा सकता है इस पर कोई स्पष्टीकरण?

Answer 1

vertical-align इनलाइन तत्वों के लिए है और div एक ब्लॉक तत्व है। position: absolute और top: 0 और bottom: 0 के साथ प्रयास करें।

td { 
    position: relative; 
    width: 200px; 
    height: 100px; 
    border: solid 1px; 
} 

#top, #bot { position: absolute; } 
#top { top: 0; } 
#bot { bottom: 0; } 

डेमो: http://css-tricks.com/what-is-vertical-align/

Answer 2

स्वीकार किए जाते हैं समाधान स्थिति का उपयोग: http://jsbin.com/iyosac/1/edit
अधिक जानकारी के लिए यहाँ की जाँच करें पूर्ण इस समस्या के लिए एक क्रॉस ब्राउज़र संगत समाधान, फायरफॉक्स नहीं है के रूप में नहीं है (और अनुसार spec करने के लिए नहीं होना चाहिए) तालिका कोशिकाओं या प्रदर्शन के साथ तत्वों में पूर्ण स्थिति की अनुमति: टेबल सेल।

इस समस्या को हल करने का वास्तव में विश्वसनीय सीएसएस-एकमात्र तरीका प्रतीत नहीं होता है, हालांकि मेरे पास एक सीएसएस-केवल फिक्स है जो इस मामले के लिए काम करता है। अनिवार्य रूप से मैंने जो किया वह तत्व से पहले डाला गया है जो टेक्स्ट की निचली पंक्ति को नीचे तक सीमित करने के लिए काफी लंबा है क्योंकि इसमें लंबवत-संरेखण है: नीचे सेट। यह अनिवार्य रूप से पैडिंग-टॉप डालने जैसा ही है, इसलिए यह समाधान का अधिक नहीं है।

डेमो: http://jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;} 
#top { 
    display: inline-block; 
    vertical-align:top; 
    width: 100%; 
} 
#bot { 
    display: inline-block; 
    vertical-align:bottom; 
    width: 100%; 
} 
#bot:before{ 
    content: ''; 
    display: inline-block; 
    height: 100px; 
} 

Answer 3

मैं एक बेहतर उपाय है, नेस्टेड तालिका का उपयोग करें:

<table width="100px" height="100px" border=1> 
    <tr> 
     <td valign="top">top</td> 
    </tr> 
    <tr height=100%> 
     <td valign="bottom">bottom 
     </td> 
    </tr> 
</table> 

Answer 4

यह करने के लिए जिस तरह से rowspan साथ है:

<table><tr> 
    <td rowspan=2>tall<br>tall<br>tall<br>tall<br> 
    <td valign="top">top</td> 
</tr><tr> 
    <td valign="bottom">bottom</td> 
</tr></table>