2011-09-20 22 views
5

enter image description hereकैसे एक टीडी सेल के अंदर एक div बनाने के लिए अगले टीडी

मैं अन्य टीडी सेल के बिना div (तत्व ई) टीडी सेल (तत्व सी) के अंदर स्थित करने के लिए सक्षम होना चाहते हैं (तत्व डी ओवरलैप) दाहिने ओर धक्का दे रहा है।

नोट: मैं तत्व के अलावा उस पृष्ठ पर कुछ भी संपादित नहीं कर सकते ई

+0

क्या आपने 'फ्लोट: बाएं; 'शैली की कोशिश की है? –

+0

क्या आपके पास कंटेनर 'div' में 'E' को लपेटने की क्षमता है? – peteorpeter

+0

@ जेरेमी: मैंने कोशिश की है, लेकिन यह – Bogdan

उत्तर

0

<div> की ऊंचाई मान लिया जाये कि 100px है और दो <td> कोशिकाओं के संयुक्त चौड़ाई का उपयोग करें 500px है:

td.element-e-container { 
    position:relative; 
    height:100px; 
} 
#element-e{ 
    position:absolute; 
    width:500px; 
    height:100px; 
} 

फिर element-e-container के तत्व ईए वर्ग और तत्व में ही element-e

+1

काम नहीं कर रहा है मान लीजिए कि आप एक और डीओएम तत्व जोड़ सकते हैं, यह अच्छी तरह से काम करता है। पूर्ण स्थिति का उपयोग करने से आप 'e' पर निश्चित चौड़ाई निर्धारित कर सकते हैं। ओटीओएच, अगर @ बोगदान को हाथ में मार्कअप का उपयोग करना है (या HTML टैग को कम करना चाहता है) नकारात्मक दाएं मार्जिन काम करेगा। – peteorpeter

+0

+1 नकारात्मक मार्जिन के बारे में नहीं सोचा था, अच्छी कॉल – Clive

1

नकारात्मक righ का एक आईडी वाले टीडी देना टी मार्जिन को चाल करना चाहिए: margin-right: -50px;

उदाहरण: http://jsfiddle.net/peteorpeter/dvr9Z/

निरपेक्ष स्थिति सकता है काम है, लेकिन अन्य जटिलताओं कहते हैं। टेबल्स + पूर्ण स्थिति दर्दनाक हो सकती है, खासकर द्रव सामग्री के साथ।

+0

एफवाईआई, यह आईई 7 में काम नहीं करता है। (नारंगी बॉक्स पूरी तरह से पहले सेल के अंदर है।) – ThatMatthew

+0

@ThatMatthew बहुत आश्चर्यजनक नहीं है। मुझे लगता है कि ऐसा लगता है क्योंकि यह एक (आंशिक रूप से) टेबल-आधारित लेआउट है, उसे आईई <8 का समर्थन करने की आवश्यकता हो सकती है ... क्या वह स्टीरियोटाइपिंग है? सर उठाने के लिए धन्यवाद। – peteorpeter

+0

@peteorpeter यहां समस्या है [jsfiddle] (http://jsfiddle.net/bogdanch/5dyWP/) – Bogdan

1

आप तत्व ई खुद के अलावा किसी भी अन्य तत्व संपादित नहीं कर सकते के बाद से:

ले जाएँ तत्व E एक कंटेनर के लिए:

<div style="position:relative;"> 
    <div id="element-E" style="position:absolute;"> ... </div> 
</div> 

मैं तत्वों को style विशेषताएं जोड़ी हैं, क्योंकि आप नहीं करने के लिए कथित तौर पर अन्य तत्वों को संशोधित करने में सक्षम हो (जैसे <style>)।

position:relative सही ढंग से एक बच्चे तत्व को सही ढंग से स्थापित करने की आवश्यकता है।

position:absolute; अपने माता-पिता से तत्व "आँसू" करता है, और माता-पिता के ऊपरी-बाएं कोने के सापेक्ष इसे दोबारा स्थानांतरित करता है (डिफ़ॉल्ट रूप से, जब स्थिति top उदाहरण के लिए बदल नहीं जाती है)।

+1

भी शामिल कर सकता हूं आपको इसके लिए कार्य करने के लिए युक्त तत्व पर पूर्ण ऊंचाई निर्धारित करने की आवश्यकता होगी; अन्यथा '' – Clive

+0

सत्य के अंदर तत्व से मेल खाने के लिए ऊंचाई में विस्तार नहीं करेगा। यदि वह चाहता है तो उसे 'तत्व-ई' की 'चौड़ाई' और 'हाइट' सीएसएस संपत्ति को भी बदलना होगा। चूंकि उन्होंने आकार के बारे में कुछ भी निर्दिष्ट नहीं किया है, इसलिए मैंने इन्हें मेरे उत्तर में छोड़ दिया है। –

+0

@Rob डब्ल्यू: मैं तत्व-ई के लिए चौड़ाई और ऊंचाई जोड़ा है, लेकिन यह काम नहीं किया, टीडी सेल (तत्व डी) अभी भी सही '

...
' – Bogdan

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