2011-12-14 13 views
53

मैं कुछ सामग्री को दो कॉलम में विभाजित करने के लिए कुछ CSS3 कॉलम (column-count: 2;column-gap: 20px;) का उपयोग कर रहा हूं। मेरी सामग्री में मेरे पास <p> है, इसके बाद <blockquote> है, इसके बाद <p> है।CSS3 कॉलम - फोर्स गैर ब्रेकिंग/विभाजन तत्व?

मेरा प्रश्न: क्या मेरे <blockquote> (या कोई अन्य निर्दिष्ट तत्व) को दो स्तंभों में विभाजित करने से रोकने का कोई तरीका है?

उदाहरण के लिए, वर्तमान में मेरे <blockquote> स्तंभ 1 में आंशिक रूप से है, और आंशिक रूप से कॉलम में 2.

Blockquote split onto multiple columns

आदर्श रूप में मैं यह इतना <blockquote> या तो स्तंभ 1 या 2 में एक साथ रहता है करना चाहते हैं ।

Blockquote maintained in column

किसी भी विचार है कि अगर यह हासिल किया जा सकता?

धन्यवाद!

उत्तर

99

उस आइटम में display:inline-block; जोड़ें जो आप विभाजन से रोकना चाहते हैं।

+0

कि यह किया खुश होती है। – Probocop

+0

यह एक बहुत ही उपयोगी युक्ति है। धन्यवाद। लेकिन दुर्भाग्य से यह jQuery कॉलम प्लगइन के साथ काम नहीं करता है।हो सकता है कि आप इस मौके से भी कामकाज जानते हों? बहुत दिलचस्प होगा: http://welcome.totheinter.net/columnizer-jquery-plugin/ – Melros

+3

भी काम नहीं करता है यदि आप कॉलम लंबी सूची तत्वों से बने हैं – fbstj

44

सिद्धांत संपत्ति आप के लिए देख रहे हैं में ...

blockquote { 
    column-break-inside : avoid; 
} 

हालांकि, पिछली बार मैं यह जाँच ठीक से वेबकिट, फ़ायरफ़ॉक्स के बारे में कोई जानकारी नहीं है में लागू नहीं किया गया था।

blockquote { 
    display: inline-block; 
} 

रेंडरर एक छवि के रूप में यह व्यवहार करता है और स्तंभों के बीच इसे तोड़ने नहीं करता है: मैं के साथ और अधिक भाग्यशाली रहे हैं।

+2

अभी भी फ़ायरफ़ॉक्स में नहीं है। – Sergey

+5

वेबकिट में -webkit-prefix के साथ काम करता है। – hakunin

5

दूसरों के लिए बस सामान्य एफवाईआई जो इस मंच में टक्कर लगी है और फ़ायरफ़ॉक्स के लिए समाधान की आवश्यकता है।

इस समय लिखने पर, फ़ायरफ़ॉक्स 22.0 संपत्ति का समर्थन नहीं करता था, यहां तक ​​कि -moz- उपसर्ग के साथ भी।

लेकिन समाधान काफी सरल है: बस display:table; का उपयोग करें। आप ** display:inline-block; भी कर सकते हैं इन समाधानों के साथ समस्या यह है कि सूची आइटम उनकी सूची शैली आइटम या बुलेट आइकन खो देंगे।

** साथ ही, display:inline-block; के साथ मैंने अनुभव की एक समस्या यह है कि यदि लगातार दो सूची आइटमों में टेक्स्ट बहुत छोटा होता है, तो नीचे की वस्तु स्वयं को ऊपर रखकर ऊपर की ओर से इनलाइन कर देगी।

display:table; दोनों समाधानों में से सबसे कम है। यहाँ

और जानकारी: http://trentwalton.com/2012/02/13/css-column-breaks/

2

According to MDN, सही समाधान

blockquote { 
    break-inside: avoid-column; 
} 

हालांकि यह सब ब्राउज़रों में not yet implemented है तो एक व्यावहारिक समाधान है,:,

blockquote { 
    display: inline-block; 
} 
संबंधित मुद्दे