2011-11-26 14 views
7

में शीर्ष-वार संरेखित करने के लिए आंतरिक divs की आवश्यकता है बाहरीतम कंटेनर div में दो आंतरिक divs हैं - दाएं तरफ वाले आंतरिक div में टेक्स्ट इनपुट है जो उपयोगकर्ता इनपुट के आधार पर बढ़ सकता है या सिकुड़ सकता है (बाद में, बहुत सारे पाठ है इसकी ऊंचाई निर्धारित करके टेक्स्ट div में अब अनुकरण किया गया: 250px)। अजीब बात यह है कि - दाएं तरफ आंतरिक div की ऊंचाई बढ़ती है - बाएं तरफ आंतरिक div बाहरी div में नीचे 'गिरता है'। मैंने divs के चारों ओर रंगीन रूपरेखा डाली - बाएं आंतरिक div, 'गिरने' समस्या वाले एक नीली रूपरेखा है। 'उपयोगकर्ता द्वारा दर्ज किए गए पाठ के कारण बढ़ रहा है' बैंगनी सीमा के साथ दाईं ओर आंतरिक div है।कंटेनर div

2 आंतरिक divs के बाहरी कंटेनर में एक नारंगी रूपरेखा है।

मुझे नीले रंग की सीमा के साथ बाएं div की आवश्यकता है 100% असम्बद्ध या दर्ज किए गए टेक्स्ट की मात्रा से अप्रभावित। नीली सीमा के साथ छोड़ दिया गया div नारंगी सीमा वाले बाहरी कंटेनर div के ऊपरी-बाएं कोने में रहना चाहिए।

दाएं तरफ हरे रंग के डिव में बॉक्स की ऊंचाई बाएं div को नीचे की तरफ धक्का क्यों देती है?

यहाँ देखने के लिए क्या हो रहा है के लिए एक कड़ी है:

http://jsfiddle.net/Shomer/JSyYY/

कोड यह रहा:

<div style="display:inline-block; border: 4px solid orange;"> 
    <div style="border: 2px solid blue; display:inline-block;"> 
     <div style="display:inline-block; border: 1px solid red;">topleft 
     </div> 
     <div style="display:inline-block; border: 1px solid red;">topright 
     </div> 
     <div>lower div 
     </div> 
    </div> 

    <div style="display:inline-block; border: 3px solid purple;"> 
    <div style="display:inline-block; height:250px; border: 1px solid red;"> "text" 
    </div> 
    <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b> 
    </div> 
    <div>&nbsp; </div> 
    </div> 
/div> 
+1

वह 250px ऊंचाई ठीक से अनुकरण नहीं कर रही है कि div में कौन सा पाठ दिखता है। यहां 250px http://jsfiddle.net/JSyYY/1/ –

+0

वाह के बिना jsfiddle कानूनी पाठ है। मैंने 'वास्तविक बाएं तरफ div' मुद्दा हल करने तक वास्तविक पाठ में प्रवेश नहीं किया था। मुझे लगता है कि एक नई समस्या है - अब बाएं नीले div के दाईं ओर अब दाएं-से-पाठ सही तरफ div क्यों नहीं है? – wantTheBest

+0

धन्यवाद ग्रिलज़ - मैंने चौड़ाई निर्धारित की है: दाईं तरफ के अब-बड़े टेक्स्ट पर 150 पीएक्स और जिसने दाएं तरफ बैंगनी-सीमा div को बाईं तरफ नीले-सीमा div के नीचे मजबूर होना बंद कर दिया है। लेआउट पर 'बहुत सारे टेक्स्ट' प्रभाव के बारे में हेड-अप के लिए धन्यवाद। – wantTheBest

उत्तर

8

Hiyou blueborder div की मूल div के शीर्ष करने के ऊर्ध्वाधर संरेखित स्थापित करने की कोशिश करनी चाहिए।

<div style="display:inline-block; border: 4px solid orange;" > 
    <div style="border: 2px solid blue; display:inline-block;**vertical-align:top**"> 
      <div style="display:inline-block; border: 1px solid red;">topleft 
      </div> 
      <div style="display:inline-block; border: 1px solid red;">topright 
      </div> 
      <div>lower div 
      </div> 
      <!-- <div>a</div> --> 
    </div> 

    <div style="display:inline-block; border: 3px solid purple;"> 
     <div style="display:inline-block; height:250px; border: 1px solid red;"> "text" 
     </div> 
     <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b> 
     </div> 
     <div>&nbsp; </div> 
    </div> 
</div> 
+0

धन्यवाद - जिसने 'बाएं तरफ नीली सीमा वाले div' मुद्दे को हल किया, धन्यवाद, अब मैं देखता हूं कि दाईं ओर बहुत सारे पाठ को बाएं div के नीचे सही div गिरना है, यकीन नहीं है कि क्यों – wantTheBest

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