बाहरी div को स्वचालित रूप से उसकी तैरती सामग्री के समान ऊँचाई का बना दें

94

मुझे वह बाहरी चाहिए div, जो उसके divभीतर तैरता हुआ काला हो। मैं आईडी style='height: 200pxके divसाथ उपयोग नहीं करना चाहता outerdivक्योंकि मैं चाहता हूं कि यह स्वचालित रूप से इसकी सामग्री की ऊंचाई (जैसे, फ्लोटिंग divएस) हो।

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

इसे कैसे प्राप्त किया जाए?

css html css-float

— जस वॉटसन
स्रोत

167

आप इसे करने के लिए outerdivसीएसएस सेट कर सकते हैं

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

आप अंत में एक तत्व जोड़कर भी ऐसा कर सकते हैं clear: both। इसे सामान्य रूप से जोड़ा जा सकता है, जेएस (एक अच्छा समाधान नहीं) या :afterसीएसएस छद्म तत्व के साथ (पुराने IE में व्यापक रूप से समर्थित नहीं)।

समस्या यह है कि फ्लोटेड बच्चों को शामिल करने के लिए कंटेनर स्वाभाविक रूप से विस्तारित नहीं होंगे। पहले उदाहरण का उपयोग करके चेतावनी दी जाए, यदि आपके पास मूल तत्व के बाहर कोई भी बच्चे तत्व हैं, तो वे छिपे रहेंगे। आप संपत्ति के मूल्य के रूप में 'ऑटो' का भी उपयोग कर सकते हैं, लेकिन अगर कोई तत्व बाहर दिखाई देता है तो यह स्क्रॉलबार को लागू करेगा।

आप मूल कंटेनर को तैरने की कोशिश कर सकते हैं, लेकिन आपके डिजाइन के आधार पर, यह असंभव / मुश्किल हो सकता है।

— एलेक्स
स्रोत

37

काश मैं इस तर्क के तर्क को समझता कि अतिप्रवाह: इस मामले में छिपे हुए काम।

— मास्टरोलियर

2

हां, मैं उम्मीद कर रहा था कि यह सिर्फ मेरे लिए नहीं था जो यह सोचता था कि यह काउंटर-सहज है। एलेक्स?

— नियमित

3

@masteroleary @ अनियमितमाइक HTML/CSSकभी भी अच्छी यूआई तकनीक नहीं रही है, इसलिए इसमें काउंटर-सहज ज्ञान युक्त चीजें काफी आम हैं :)

— यूरी नकोनचैनी

2

@masteroleary मुझे एहसास है कि यह एक पुराना धागा है, लेकिन मैंने हाल ही में stackoverflow.com/questions/21041297#21041625 पर इसी तरह के सवाल का जवाब देने की कोशिश की - आशा है कि यह मदद करता है

— xec

1

floatसमाधान के लिए +1 । दूसरों के साथ बहुत अच्छी तरह से काम करता है, खासकर जब ट्विटर बूटस्ट्रैप के साथ जोड़ा जाता है।

— फिजिक्स

17

सबसे पहले, मैं आपको अत्यधिक सलाह देता हूं कि आप अपने सीएसएस स्टाइल को बाहरी सीएसएस फ़ाइल में करें, बजाय इनलाइन करने के। यह बनाए रखना बहुत आसान है और कक्षाओं का उपयोग करके अधिक पुन: प्रयोज्य हो सकता है।

एलेक्स के जवाब (और गैरेट के उपसर्ग) को "स्पष्ट के साथ एक तत्व को जोड़ना:" दोनों पर काम करना, आप इसे पसंद कर सकते हैं:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

यह काम करता है (लेकिन जैसा कि आप देख सकते हैं कि इनलाइन CSS बहुत सुंदर नहीं है)।

— Lycana
स्रोत

मुझे क्यों दर्जा दिया गया? यह काम करता है, और मैंने सही स्वीकार किया कि यह एक सुंदर समाधान नहीं था।

— लाइकाना

1

मुझे यकीन नहीं है, मैं आपको कम से कम 0 पर वापस लाने के लिए +1 करूंगा। हो सकता है कि आपको गलत तरीके से वोट दिया गया था क्योंकि आपने उसका गलत CSS सही नहीं किया था ... अर्थात CSS संपत्ति सेट करने के लिए बराबर चिह्न का उपयोग करना गलत है।

— एलेक्स

काफी उचित। मैं +1 एलेक्स की सराहना करता हूं। मुझे लगा कि यह मेरा कथन उचित था।

— लाइकाना

यह समाधान बेहतर IMO है। यदि यह मेरा प्रश्न होता तो मैं इस उत्तर को स्वीकार करता।

— ksg91

8

आप http://www.sitepoint.com/simple-clearing-of-lololo/ पर विस्तृत रूप से स्व-समापन फ़्लोट्स आज़माना चाह सकते हैं

तो शायद या तो कोशिश करें overflow: auto(आमतौर पर काम करता है), या overflow: hidden, जैसा कि एलेक्स ने कहा है।

— DarkWulf
स्रोत

छिपे हुए काम करता है, लेकिन आप सही हैं, ऑटो उस बेहतर काम करता है। धन्यवाद।

— मैट सेटर

7

मुझे पता है कि कुछ लोग मुझसे नफरत करेंगे, लेकिन मुझे display:table-cellइस मामलों में मदद करने के लिए मिला है।

यह वास्तव में क्लीनर है।

— Nande
स्रोत

बाहरी div उपयोग प्रदर्शन: तालिका; और अंदर div उपयोग प्रदर्शन: टेबल-सेल;

— अनुकुल लिम्पासिल

4

सबसे पहले आप इसका उपयोग नहीं करते हैं width=300pxकि सीएसएस नहीं टैग के लिए एक विशेषता सेटिंग है, width: 300px;इसके बजाय का उपयोग करें ।

मैं इस clearfixतकनीक को लागू करने का सुझाव दूंगा #outerdiv। क्लीयरफिक्स 2 फ्लोटिंग डिवो को क्लियर करने का एक सामान्य उपाय है इसलिए पेरेंट डिव का विस्तार 2 फ्लोटिंग डिव को समायोजित करने के लिए होगा।

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

यहां आपकी स्थिति का एक उदाहरण है और इसे हल करने के लिए क्लीयरफिक्स क्या करता है।

— गैरेट
स्रोत

3

JQuery का उपयोग करें:

माता-पिता की ऊँचाई निर्धारित करें = बाल ऑफसेट।

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

— हरपाल
स्रोत

3

ओवरकिल, जब आप इसे अकेले सीएसएस के साथ कर सकते हैं।

— एलेक्स

1

मेरे जवाब से आप चाइल्ड हाइट के रूप में पैरेंट हाइट सेट कर सकते हैं लेकिन ओवरफ्लो का उपयोग करके हम पेरेंट हाइट नहीं बदल रहे हैं जिससे कुछ समस्या पैदा होगी अगर हम पेरेंट डिव के बाद डेटा दिखा रहे हैं।

— हरपाल

1

उपयोग clear: both;

मैंने एक सप्ताह से अधिक समय बिताया है, यह जानने की कोशिश कर रहा हूँ!

— रोनन
स्रोत