सीएसएस: माता-पिता-div इसके बच्चों (क्षैतिज) के साथ नहीं बढ़ता

मैं हरे रंग के बच्चे-div के साथ माता-पिता-लाल (लाल) बढ़ना चाहता हूं। अब यह व्यूपोर्ट पर रुक जाता है।सीएसएस: माता-पिता-div इसके बच्चों (क्षैतिज) के साथ नहीं बढ़ता

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head> 
<title>simple document</title> 
<style type="text/css"> 
* { 
    font-family: verdana; 
    margin: 0px; 
    padding: 0px; 
} 
</style> 
</head> 
<body> 
<div style="margin: 30px; background: red; padding: 10px;"> 
<div style="background: green; width: 2000px;">dxyf</div> 
</div> 
</body> 
</html>

मैं प्रदर्शन का उपयोग नहीं करना चाहता: तालिका; चूंकि यह आईई में अच्छी तरह से काम नहीं करता है।

कोई विचार?

स्रोत

2010-03-30 vyden_st

पैरेंट div 2000 पिक्सेल क्यों नहीं बनाते? यह काम करना चाहिए। – Joop

@ जूप जाहिर है कि वह माता-पिता की चौड़ाई को बच्चे की चौड़ाई पर निर्भर करता है (जो सामग्री के आधार पर भिन्न हो सकता है) –

यह सही है :) –

माता पिता <div> पर उपयोग display: inline-block; और यह के रूप में की उम्मीद

स्रोत

2010-03-30 13:07:33

हाँ! एक दम बढ़िया! धन्यवाद, मैंने कभी सोचा नहीं कि यह आईई में भी काम करेगा - बस कुछ उपयोगी सीख लिया! –

क्विर्कमोड (http://www.quirksmode.org/css/display.html) कहता है कि आप उन तत्वों पर 'इनलाइन-ब्लॉक' डिस्प्ले का उपयोग नहीं कर सकते हैं जो आईई 6 के लिए 'डिस्प्ले: इनलाइन' के लिए डिफ़ॉल्ट नहीं हैं और 7. क्या आपने इसका परीक्षण किया है? –

@ एलेक्स ट्रू, लेकिन यह आगे सोचने वाला समाधान है जो मानक का पालन करता है। पुराने ब्राउज़र को संबोधित करने के लिए, सशर्त टिप्पणियों का उपयोग मूल तत्व (यदि आवश्यक हो) को 'फ्लोट' लागू करने के लिए किया जा सकता है। –

माता पिता div नाव बनाने के लिए काम करेंगे: छोड़ा; और इसे वांछित के रूप में विस्तारित किया जाएगा।

स्रोत

2010-03-30 13:10:31 Paul

एफएफ 2 में यह काम नहीं करेगा _properly_ - बच्चा माता-पिता से बड़ा बढ़ता है .. हम इसे कैसे हल कर सकते हैं? जाहिर है यह माता-पिता के मार्जिन के कारण है। –

आपको या तो एक स्पष्ट तत्व की आवश्यकता होगी या आप नीचे पोस्ट किए गए क्विर्कमोड समाधान का उपयोग कर सकते हैं। – UpTheCreek

मैं जानता हूँ कि मुझे देर हो रही है, लेकिन यहाँ क्या मैं इस समस्या को ठीक करने के लिए क्या है:

तल पर माता पिता के अंदर स्पष्ट करें, और माता पिता के अतिप्रवाह बनाने: छिपा हुआ।

FF3 और IE7 में

.clear{ 
    clear: both; 
    /* make sure there is no height set to it */ 
    line-height: 0; 
    height: 0; 
    font-size: 0em; 
} 

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;"> 
<div style="background: green; width: 2000px;">dxyf</div> 
<div class="clear">/div> 
</div>

काम करता है, लेकिन हालांकि अन्य ब्राउज़रों में परीक्षण नहीं:

यहाँ संशोधित कोड है।

कम से कम, आपकी समस्या से आपकी सहायता करें।

स्रोत

2010-06-01 15:34:17

quirksmode.org से this solution देखें। यह बहुत आसान है, बस इस वर्ग को कंटेनर/पैरेंट div पर लागू करें:

div.container { 
    overflow: hidden; 
    width: 100%; 
}

स्रोत

2010-11-13 09:35:48 UpTheCreek

प्रदर्शन का उपयोग करें: तालिका; पैरेंट div पर। या आप मूल div को किसी तालिका के सेल में डाल सकते हैं।

स्रोत

2011-03-06 08:45:56 Bang

यहां बहुत जटिल सलाह दी गई है। यहां एक टिप है: टेबल-सेल्स के साथ टिंचर करने के बजाय, और साफ़ और फ्लोट्स, बस सुनिश्चित करें कि बच्चे की सीमा है जो पैडिंग के बराबर है जिसे आप माता-पिता की तलाश में थे। सीमाओं को हमेशा बाहर खींचा जाता है, इसलिए यह वही करेगा जो आप चाहते हैं।

यह काम करना चाहिए ...

<div style="margin: 30px; background: red;"> 
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div> 
</div>

... सभी ब्राउज़रों में, एक समस्या के बिना। HTH।

स्रोत

2012-05-14 04:16:52 PKHunter

रिश्तेदार और बच्चे को पैरेंट स्थिति को पूर्ण

स्रोत

2013-10-10 06:12:41

सीएसएस: माता-पिता-div इसके बच्चों (क्षैतिज) के साथ नहीं बढ़ता

उत्तर

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