CSS3 के कॉलम और छवियों

Question

मेरे यहाँ का उदाहरण,

CSS3 के केंद्र में एक छवि दिखाता कॉलम उत्पन्न। छवि के चारों ओर लपेटने के लिए मुझे छवि के दाईं ओर कॉलम में टेक्स्ट की आवश्यकता है ताकि यह छवि के सामने दिखाई न दे। यह मेरी समझ के लिए वर्तमान सीएसएस में करने योग्य नहीं है।

क्या किसी के पास जो कुछ भी मैं ढूंढ रहा हूं उसे प्राप्त करने का कोई गैर-उद्देश्यपूर्ण तरीका है?

मैं प्राप्त करने के लिए इस यहाँ देखने के लिए अच्छा लगेगा,

निश्चित रूप से शीर्ष बाएँ में स्थित शीर्षक और विविध सामान के बिना

। विचार मार्कअप में कहीं भी छवियों को जोड़ने की अनुमति देना होगा और इसे सही तरीके से दिखाना होगा।

मुझे इस समय ब्राउज़र समर्थन की परवाह नहीं है, इसलिए - कोई समाधान बहुत अच्छा है!

अग्रिम धन्यवाद ....

एरिक

Answer 1

जावास्क्रिप्ट हैक्स किए बिना, मुझे विश्वास नहीं है कि ऐसा करने का कोई शुद्ध सीएसएस तरीका है। कॉलम-स्पैन प्रॉपर्टी है, जिसे ओपेरा द्वारा समर्थित किया जाता है (वर्तमान में सार्वजनिक निर्माण में नहीं), लेकिन इसमें केवल दो मान हैं; कोई और सब नहीं। वर्तमान में spec आपको कॉलम की संख्या निर्दिष्ट करने की अनुमति नहीं देता है, जो बहुत उपयोगी होगा। यह ऐसा कुछ है जिसे मैं देखना पसंद करूंगा। max-width:100%;

और प्रयोग सीएसएस कुछ पीछे की ओर संगतता के मुद्दों (विशेष रूप से IE के साथ) कर रहे हैं, लेकिन वे जे एस के साथ खामियों को दूर किया जा सकता है -

Answer 2

शायद स्तंभ अवधि संपत्ति यदि आप बीच की संचयी चौड़ाई के लिए छवि के लिए एक अतिरिक्त कंटेनर स्तंभ अवधि चौड़ाई बना सकते हैं और सेट मदद कर सकते हैं कॉलम।

आप मध्यम कॉलम को भी बड़ा कर सकते हैं और किसी अन्य कॉलम की आवश्यकता को हटा सकते हैं, इसलिए पाठ और छवि अच्छी तरह से गठबंधन की जाएगी, लेकिन इस चरण में, यह डिजाइन विचार है।

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

Answer 3

इसके बजाय स्तंभ की संख्या को परिभाषित करने की आप चित्र के आकार को समायोजित करने के अपने आकार को परिभाषित कर सकते हैं। या आप प्रत्येक कॉलम के लिए एक आकार परिभाषित कर सकते हैं, फिर आप कॉलम की चौड़ाई के आधार पर स्वचालित रूप से आकार बदलने के लिए छवियों पर एक सीएसएस चयनकर्ता जोड़ते हैं।

कुछ .column { कॉलम: 12em; }

.column img { चौड़ाई: 10em; }

Answer 4

height और width img विशेषताओं बाहर नॉक

- वे की जरूरत नहीं कर रहे हैं। यह विधि भविष्य है।

एक संदर्भ के साथ उपयोगी संबंधित लेख:

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

बेस्ट,

Answer 5

यह अपने प्रश्न का सटीक उत्तर नहीं है, लेकिन कम से कम वहाँ एक स्तंभ के अंदर छवि के चारों ओर पाठ रैप करने के लिए संभावना है। here से "उदाहरण एक्स" देखें।