बढ़ाएँ एक div अपने बच्चों के आधार पर चौड़ाई चौड़ाई

Question

यहाँ मेरी छोटी सी समस्या है (मूल्य सिर्फ उदाहरण के लिए यहाँ हैं):

चलें कहते हैं कि मैं 500px के चारों ओर एक चौड़ाई के साथ एक खिड़की है। मेरे दस्तावेज़ के अंदर, मैं कोई निर्दिष्ट चौड़ाई के साथ एक बाहरी div है, लेकिन निम्नलिखित सीएसएस:

.t1{ 
    display:inline-block; 
    width:400px; 
} 

(नोटिस:

.outer{ 
    white-space:nowrap; 
    background:blue; 
} 

इस div के अंदर 3 अन्य div है कि निम्नलिखित गुण हैं ।

<div class="outer"> 
    <div class="t1">1</div> 
    <div class="t1">2</div> 
    <div class="t1">3</div> 
</div> 

: 400px की चौड़ाई वहीं समस्या है लाइन खिड़की की तुलना में व्यापक है एचटीएमएल कि तरह दिखाई देता है, और बाहरी div विस्तार नहीं करता ।

जो मैं प्राप्त करने की कोशिश कर रहा हूं वह है कि नीली पृष्ठभूमि के साथ 3 आंतरिक div, t1 कक्षा के लिए इसे सेट किए बिना। यह उदाहरण क्या होगा, नीली पृष्ठभूमि खिड़की की चौड़ाई तक ही सीमित है।

यहाँ पूर्ण उदाहरण देखें: http://jsfiddle.net/sjCTR/ (आप नीचे बाएँ कोने अनुकूल करने के लिए अगर आपकी स्क्रीन बड़ी है होगा)

मैं सोच रहा हूँ कि अगर किसी भी तरह सीएसएस/केवल एचटीएमएल के माध्यम से प्राप्त किया जा सकता है, की स्थापना के बिना बाहरी div चौड़ाई/आंतरिक div पृष्ठभूमि?

Answer 1

float: left या display: inline-block.outer जोड़ें।

Answer 2

अतिप्रवाह जोड़ें: छुपा; चौड़ाई: 100%; बाहरी