फ़ायरफ़ॉक्स में अपने कंटेनर के नीचे एक तत्व को कैसे स्थापित कर सकता हूं?

मेरे पास एक टेबल सेल है, और मैं हमेशा नीचे के बाएं कोने में हमेशा एक div चाहता हूं। निम्नलिखित आईई और सफारी में ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स पृष्ठ पर बिल्कुल div को स्थिति में रख रहा है, सेल के भीतर नहीं (समाधान समाधान here पर आधारित कोड)। मैंने डीटीडी के साथ और उसके बिना दोनों का परीक्षण किया है, जो फ़ायरफ़ॉक्स को क्विर्क मोड और मानक मोड में रखता है, और न ही ठीक से काम करता है। मैं अटक गया हूँ - कोई विचार?फ़ायरफ़ॉक्स में अपने कंटेनर के नीचे एक तत्व को कैसे स्थापित कर सकता हूं?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; } 
     th, td { vertical-align: top; border:1px solid black; position:relative; } 
     th { width:100px; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table> 
    </body> 
</html>

स्रोत

2008-11-14 Chris Marasti-Georg

क्या आपको ऐसा करने का तरीका मिला है? – Alex

@jitbit मैंने नहीं किया है। –

यह सुनकर खेद है ... अंततः नीचे सामग्री को पकड़ने के लिए मैंने एक नया सीमाहीन "" जोड़ दिया। – Alex

देखें कि यह आपके लिए काम करता है या नहीं। समस्या के सटीक आश्वासन के बारे में निश्चित नहीं है लेकिन रिश्तेदार स्थिति के साथ टीडी का उपयोग करने के साथ इसका कुछ संबंध है। मैंने मेज को div टैग के साथ लपेट लिया और अपेक्षाकृत तैनात किया और ऐसा लगता है कि आप क्या चाहते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; } 
     th, td { vertical-align: top; border:1px solid black; } 
     th { width:100px; } 
     div.body {position:relative; width:500px;} 
     .manage { text-align:right; position:absolute; bottom:0; right:0; display:block} 
     </style> 
    </head> 
    <body > 
    <div class="body"><table> 
     <tr> 
       <th>Some info about the following thing and this is actually going to span a few lines</th> 
       <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table></div> 
    </body> 
</html>

स्रोत

2008-11-14 15:15:31

दुर्भाग्य से, यह तब टूट जाता है जब मैं तालिका में एक और पंक्ति जोड़ता हूं जो समान दिखता है। –

position: relative जाहिरा तौर पर विश्व स्तर पर td टैग के लिए समर्थित नहीं है। मुझे दुर्भाग्य से निश्चित स्रोत नहीं मिल सका।

आप div को इच्छित आकार के साथ td में डालना चाहते हैं और इसके बजाय position: relative लागू करना चाहते हैं।

स्रोत

2008-11-14 15:17:41 Lasar

यह कोशिश कर रहा है, मैं टीडी भरने के लिए div नहीं प्राप्त कर सकता। –

यह वास्तव में स्पष्ट हो सकता है, लेकिन आपने .manage में vertical-align: bottom; का उपयोग करने का प्रयास किया है?

स्रोत

2008-11-14 15:18:15 Powerlord

W3C के अनुसार, स्थिति:

"के प्रभाव की स्थिति: रिश्तेदार ' तालिका पंक्ति-समूह पर, टेबल हेडर-समूह, तालिका में वह संबंधित तालिका सेल पर कोई प्रभाव नहीं -फुटर-समूह, टेबल-पंक्ति, तालिका-कॉलम-समूह, तालिका-कॉलम, तालिका-कक्ष, और तालिका-कैप्शन तत्व अपरिभाषित है। "

समाधान तालिका कक्ष में एक अतिरिक्त रैपिंग div जोड़ने का है।

संपादित करें: इस div को height:100% और position:relative; सेट करने की आवश्यकता है। 100% और ऊंचाई:

<table> 
    <tr> 
     <td> 
      <div style="position:relative;height:100%;"> 
       Normal inline content. 
       <div class="manage">your absolute-positioned content</div> 
      </div> 
     </td> 
    </tr> 
</table>

स्रोत

2008-11-14 15:20:48

यह इसे नीचे तक नहीं दबाता है :( –

अब संपादित कोड उदाहरण। मैंने फ़ायरफ़ॉक्स 3 में इसका परीक्षण किया और यह काम करता है। –

एफएफ 3 में, यह मेरे लिए नीचे नहीं दबा रहा है। Http: //i36.tinypic। com/znqxpv.jpg –

चौड़ाई के साथ टीडी के अंदर एक DIV है 100% है, तो सेट है कि स्थिति के लिए: रिश्तेदार।

स्रोत

2008-11-14 15:36:21 jishi

यह काम नहीं करता है - आंतरिक div को नीचे तक धक्का नहीं दिया जाता है। –

दाएं, स्थिति: सापेक्ष का टेबल तत्वों के लिए कोई प्रभाव नहीं पड़ता है, और फ़ायरफ़ॉक्स इस नियम को लागू करता है। div का समाधान काम करता है, लेकिन यह मेरी राय में भयानक मार्कअप है।

क्या आपको इस सामग्री को प्रदर्शित करने के लिए बिल्कुल तालिका का उपयोग करने की आवश्यकता है? (या यह सापेक्ष है?)

यदि नहीं, तो आप div तत्वों का उपयोग क्यों नहीं करते हैं और आप क्या चाहते हैं?

लेआउट मुद्दों के लिए तालिकाओं का उपयोग करने के लिए 1998 है ...

स्रोत

2008-11-14 15:36:57 alexmeia

जो डेटा मैं प्रदर्शित कर रहा हूं वह है टैब्यूलर। एक कॉलम सी प्रदर्शित करता है एक टिप्पणी के लिए ontext, अन्य कॉलम टिप्पणी खुद को प्रदर्शित करता है। एक अर्थपूर्ण रूप से समृद्ध एक प्रदान किए जाने वाले तत्व का उपयोग क्यों करें, जो मेरे मामले को फिट करता है? –

ठीक है, लेकिन तालिका के बजाय एक परिभाषा सूची (डीएल) भी एक अर्थपूर्ण समाधान हो सकता है। – alexmeia

वे वास्तव में परिभाषा नहीं हैं। क्या यह सुनिश्चित करने का कोई तरीका है कि डीटी और डीडी समान ऊंचाई पर रहें क्योंकि सामग्री में परिवर्तन होता है? –

मेज पर एक display:block रखो और अब एफएफ स्थिति का सम्मान करता है: रिश्तेदार।

स्रोत

2010-07-20 15:20:08 Wouter

+1 यह सुनिश्चित करता है कि यह काम करता है! – Frankie

एफएफ 18 में, यह तालिका को इसकी चौड़ाई को बनाए रखने का कारण बनता है, और तत्व तालिका के ऑफ़सेट पैरेंट पर बिल्कुल स्थित होते हैं (इस मामले में, विंडो) –

फ़ायरफ़ॉक्स में अपने कंटेनर के नीचे एक तत्व को कैसे स्थापित कर सकता हूं?

उत्तर

संबंधित मुद्दे