मैं माता पिता div

को एक पिक्सेल जोड़ने के लिए मैं "कक्षा" कि प्रत्येक "छात्रों के लिए" div शामिल के लिए एक div है की जरूरत है। प्रत्येक "छात्र" div में एक छवि होती है। यहाँ HTML है:मैं माता पिता div

<div class="classroom"> 
    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"> 
    </div> 

    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"> 
    </div> 

    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"> 
    </div> 
</div>

मैं तो मैं निम्नलिखित सीएसएस का उपयोग एक पंक्ति में सभी "छात्रों" divs प्रदर्शित करना चाहते हैं:

body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

html, body { 
    height: 100%; 
} 

.classroom { 
    position: relative; 
    height: 100%; 
} 

.classroom .student { 
    position: relative; 
    height: 100%; 
    float: left; 
} 

.classroom .student .student-image { 
    height: 100%; 
}

आदेश में छात्रों में पर्याप्त स्थान होगा " कक्षा "div, मैं क्रम में jQuery का प्रयोग करें की चौड़ाई की गणना" कक्षा ":

$(document).ready(function() { 
    var w = 0; 
    $(".student").each(function() { 
     w += $(this).width(); 
    }); 
    $(".classroom").width(w); 
});

दुर्भाग्य से परिणाम नहीं है कि मैं क्या उम्मीद। अंतिम "छात्र" div अगली पंक्ति में जा रहा है (जैसे कि float: left; असाइन किया गया था)। अधिक अजीब बात यह है कि जब 1 पिक्सेल में "कक्षा" div की चौड़ाई बढ़ती है, तो div पहली पंक्ति के अंत में स्थिति में वापस आती है।
मैंने उन jsfiddles को बनाया: यहां http://jsfiddle.net/U3gBG आप समस्या देख सकते हैं। परिणाम पैनल पर क्लिक करें और नीचे स्क्रॉल करने के लिए तीर कुंजियों का उपयोग करें।
यहां http://jsfiddle.net/U3gBG/1/ आप गणना के बाद "कक्षा" div की चौड़ाई में 1 जोड़ने के परिणाम देख सकते हैं ("कक्षा" की चौड़ाई "छात्रों" चौड़ाई और 1 पिक्सेल के योग के बराबर होती है)। यह परिणाम मुझे चाहिए।
मुझे समझ नहीं आता क्यों मैं 1 से माता पिता div की चौड़ाई बढ़ाने के लिए की आवश्यकता है करते हैं? क्यों सभी बच्चे divs चौड़ाई पर्याप्त नहीं है?

स्रोत

2012-12-01 Naor

क्या आपने इसे एकाधिक ब्राउज़रों में देखने की कोशिश की है? शायद यह एक विशिष्ट ब्राउज़र मुद्दा है? –

@EyalAlsheich: मैं सबसे अद्यतन फ़ायरफ़ॉक्स का उपयोग कर रहा हूं और मुझे इसके साथ काम करने की आवश्यकता है। – Naor

फ़ायरबग में लेआउट टैब को देखने का प्रयास करें यह देखने के लिए कि क्या आपको 1 पिक्सेल तत्व मिल सकता है, हालांकि आपका कोड देखने से यह समस्या बहुत अजीब लगती है। मैंने इसे बेवकूफ में देखने की कोशिश की लेकिन छवियां बहुत बड़ी हैं और इसे स्क्रॉल नहीं कर सकते हैं, कृपया इसे छोटी छवियों के साथ आज़माएं ताकि मैं –

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

आप jQuery का उपयोग कर अभिभावक का आकार बदल रहे हैं, लेकिन तीन से विभाजित होने पर आपको गोल करने जा रहे हैं। कुछ मामलों में एक गोल नीचे छवियों और तीसरे लपेटें के लिए कंटेनर बहुत संकीर्ण होने का कारण बनता है। यदि यह गोल हो तो आपके पास पर्याप्त कमरा है और कोई रैपिंग नहीं होती है।

नीचे पोस्ट किया गया समाधान एक और मजबूत जवाब है क्योंकि यह स्वचालित रूप से ब्राउज़र आकार बदलने पर पुन: गणना करता है। आपको जेएस के साथ इसे संभालने के लिए लगातार अपने जेएस को चलाने और आकार बदलने की घटनाओं की निगरानी करना होगा। उम्मीद है की वो मदद करदे।

जावास्क्रिप्ट का उपयोग करने के बजाय आप सीएसएस का उपयोग कर सकते हैं?

student से display:inline पर सेट करें। फिर parent से white-space:nowrap पर सेट करें। वे लपेट नहीं करेंगे। इसके बाद आपको छवियों के बीच व्हाइटस्पेस को संभालना होगा। जैसा कि हमने अब उन्हें inline पर सेट किया है, एचटीएमएल में किसी भी व्हाइटस्पेस में अंतर होता है। इसलिए यदि आप छवि कंटेनर पर 'फ़ॉन्ट-आकार: 0 पीएक्स' सेट करते हैं तो यह अंतर को ध्वस्त कर देता है। कंटेनरों को टेक्स्ट रखने की आवश्यकता होने पर फ़ॉन्ट को सकारात्मक मात्रा में सेट करना याद रखें। जेएस के साथ कोई गड़बड़ नहीं है।

http://jsfiddle.net/U3gBG/8/

body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

html, body { 
    height: 100%; 
} 


.classroom { 
    white-space: nowrap; 
    height: 100%; 
    font-size: 0px; 
} 

.classroom .student { 
    height: 100%; 
    display: inline; 
} 

.classroom .student .student-image { 
    height: 100%; 
}

स्रोत

2012-12-01 02:40:44 mrtsherman

जबकि यह समस्या को ठीक कर सकता है, मैं अभी भी बहुत उत्सुक हूं कि यह समस्या क्यों हो रही है –

@EyalAlsheich - मुझे असंगत ब्राउज़र व्यवहार दिखाई देता है। क्रोम में, दोनों सैंपल फिडल लपेटें। फ़ायरफ़ॉक्स और आईई 9 में न तो लपेटें। असल में कुछ और निरीक्षण के बाद मुझे लगता है कि मुझे पता चल सकता है कि क्या हो रहा है। मैं अपना जवाब अपडेट करूंगा। – mrtsherman

@mrtsherman: काश मैं इसे केवल सीएसएस के साथ हल कर सकता हूं, लेकिन मुझे लगता है कि यह समस्या को हल नहीं कर रहा है। छवियों को आंशिक रूप से प्रदर्शित किया जाता है क्योंकि आप विंडो के आकार को बढ़ाते हैं। – Naor

जब मैं डिबगिंग स्क्रीन के नीचे IE9 में इसे देखो मैं अपने div तत्व और छवि तत्वों का निरीक्षण किया और ऐसा लगता है पहली छवि की चौड़ाई 999.95 है और नहीं एक दौर संख्या इतनी हैं अन्य दो छवियों में प्रत्येक एक पूर्णांक चौड़ाई मान है।

यह सुनिश्चित करता है कि कुछ ब्राउज़र इस संख्या को पार करेंगे और कुछ इसे नीचे घुमाएंगे, ताकि आप या तो दूसरे उत्तर में सुझाए गए सीएसएस का उपयोग कर सकें या आप बस +1 पिक्सेल जोड़ सकते हैं जैसे आप कर रहे हैं या आप यह सुनिश्चित करने के लिए कि आपकी छवियों में मूल div में पर्याप्त कक्ष होगा, पैरासींट() फ़ंक्शन या कुछ प्रकार के राउंड अप फ़ंक्शन का उपयोग कर सकते हैं।

संपादित करें:

मुझे लगता है कि इस मुद्दे को height: 100% की सीएसएस मूल्य की वजह से उपजी, इस menas कि चौड़ाई गणना की जाती है और वास्तविक छवि आकार, पिक्सेल में चौड़ाई के लिए इसलिए गैर पूर्णांक मान को ठीक नहीं किया, इसलिए में छवियों को रखने की इस विधि का उपयोग जारी रखने के लिए आपको math.ceil() या पैरेंट div की कुल चौड़ाई जोड़ते समय उस प्रकृति का कुछ उपयोग करना होगा।

स्रोत

2012-12-01 02:53:06

गैर-पूर्णांक पिक्सेल चौड़ाई संभव नहीं होनी चाहिए ... – mrtsherman

Math.ceil प्रत्येक छात्र के बाद से काम नहीं करेगा चौड़ाई एक पूर्णांक है। जब भी मैं w + = $ (this) .width(), $ (this) .width() एक पूर्णांक देता है और "डबल प्रकार" संख्या नहीं देता है। – Naor

-1

यू उल ली

<ul style="float:left; List-style:none;"> 
<li><img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"></li> 
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"></li> 
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"></li> 
    </ul>

का उपयोग करें और

स्रोत

2012-12-01 03:17:52

जबकि आपका सुझाव पूरी तरह से काम करेगा और छवियों को दिखाएगा यह नहीं है कि यह प्रश्न –

बजाय 3 वर्गों में उन्हें विभाजित उन्हें जिस तरह से आप उन्हें एक श्रृंखला के माध्यम से जाना होने की छवि का आकार तय कर सकते हैं। इसके बजाय

.classroom { 
    white-space: nowrap; 
    height: 100%; 
} 

.classroom .student { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.classroom .student .student-image { 
    height: 100%; 
}

होने के सिर्फ उन्हें बनाने

.classroom { 
    white-space: nowrap; 
    height: 100%; 
} 

.student { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.student-image { 
    height: 100%; 
}

ताकि आप हर एक परिभाषित .... अब जहाँ तक समस्या आप हो रही है के रूप में, कि क्योंकि आपके पास पर्याप्त विशिष्ट नहीं किया जा रहा रहे हैं है अपने सीएसएस में आप चीजों को कैसे बनना चाहते हैं, अब आपके पास चौड़ाई या ऊंचाई सेट है, आपके पास केवल छात्र तत्व के लिए तैरती है, इसलिए अजीब चीजें करना आसान है। की तरह कुछ की कोशिश करो ..

.classroom { 
    width:308px; 
    height:100px; 
    float:left; 
    margin-left:0px; 
} 

.student { 
    height:100px; 
    width:100px; 
    margin-left:2px; 
    float: left; 
} 

.student-image { 
    height: 100px; 
    width:100px; 
    float:left; 
}

idk यदि सटीक ऐनक मैं दे दी है अपने खुद के चित्र के लिए काफी बड़ा होगा, लेकिन केवल आपके दिखाने के लिए आप उन्हें कैसे पर कुछ नियंत्रण हो रही कोशिश करनी चाहिए ... और चश्मा मैं दिया नोटिस चौड़ाई के लिए। कक्षा 308 पिक्सेल चौड़ी है, तो छात्र 2 पिक्सल के बाएं हाशिए के साथ 100 पिक्सल चौड़ा है, इसलिए 3 छात्र प्रत्येक 100 पिक्सल चौड़ाई के साथ प्रत्येक पिक्सल मार्जिन के साथ 306 पिक्सेल की चौड़ाई तक फ्रेम करते हैं, जिससे 2 पिक्सेल तक आखिरी छात्र फ्रेम का अधिकार, इसलिए यह सब जोड़ता है .. हालांकि इसे व्यापक रूप से इसकी गणना करें और आपको मार्जिन पर विचार करें। उम्मीद है कि यह मदद करता है ... :)

स्रोत

2012-12-01 06:21:38 Optiq

चेनिंग को हटाने से सीएसएस को प्रभावित नहीं किया जाता है। ओपी के सवाल के साथ इसका बिल्कुल कुछ भी नहीं है। उसे हटाने के लिए उसे क्यों कहें? क्षमा करें, लेकिन आपका जवाब भी समझ में नहीं आता है। आप कक्षा कंटेनर तैर रहे हैं जिसे पहले स्थान पर नहीं रखा जाना चाहिए। छवियों को फ़्लोट करना कुछ भी नहीं पूरा करता है। आपको इस जवाब पर पुनर्विचार करना चाहिए। – mrtsherman

मेरे पास छात्रों की चौड़ाई नहीं है। – Naor

मैं माता पिता div

उत्तर

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