2010-09-25 22 views
29
<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;"> 

    <div style=" 
     border: 2px solid black; 
     margin: 0 auto; 
     text-align: center; 
     padding: 3px;"> 

    Hello<br />Hola 

    </div> 

    <div style=" 
     border: 2px solid black; 
     margin: 0 auto; 
     text-align: center; 
     padding: 3px;"> 

    Another Sentence 

    </div> 

</div> 

मुझे कोई समस्या है: पृष्ठ की पूरी चौड़ाई पर आंतरिक div की पहुंच की सीमाएं, लेकिन मैं चाहता हूं कि वे केवल उनके अंदर सामग्री को फ्रेम करें। यदि मैं उपयोग करता हूं: display: inline सीमाएं प्रत्येक पंक्ति को अलग-अलग फ्रेम और ओवरलैप करती हैं, इसलिए यह काम नहीं करती - क्या कोई मदद कर सकता है?div की 100% चौड़ाई

पी.एस शैली के मूल दस्तावेज़ में, लेकिन एक स्टाइलशीट

+0

डिस्प्ले: इनलाइन-ब्लॉक, मेडर और निकिता Rybak के लिए धन्यवाद – Samuel

उत्तर

46

में इस तरह की घोषणा नहीं कर रहे हैं पूरी तरह से तैनात तत्व के लिए एक चौड़ाई निर्दिष्ट करें? यदि आप सिकुंक-रैपिंग की तलाश में हैं, float:left या display:inline-block इसके लिए बिल्कुल सही हैं।

15

display:inline-block आज़माएं, यह हमेशा मुझे इस तरह की स्थितियों में मदद करता है।

http://jsfiddle.net/FaYLk/

7

इसका बस के रूप में सरल नहीं करना है:

display: inline-block; 

आप क्रॉस ब्राउज़र यह करने के लिए है कि अधिक से अधिक करना चाहिए।

display: inline-block; 
display: -moz-inline-stack; /* for firefox 2 */ 
*display: inline; /* for ie 6 and 7 */ 
1

सभी सामग्री के आस-पास एक कंटेनर रखें। E.g

<div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div> 
.container{ display: inline-block; } 
संबंधित मुद्दे