मीडिया के साथ समाचार पत्र और div जैसे सीएसएस कॉलम

Question

मैं सीएसएस, जेएस या PHP के माध्यम से संलग्न छवि जैसे कुछ कोड को कोड करने में सक्षम होने का समाधान खोजने की कोशिश कर रहा हूं।

मैं अपने लेखों के लिए तीन कॉलम रखना चाहता हूं। और लेख के मीडिया के लिए 2 अंतिम कॉलम के एक अतिरिक्त div के शीर्ष पर।

इसके लिए ट्यूटोरियल या सीएसएस स्थिति चाल के साथ लिंक अमूल्य हैं!

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

छवि लिंक: http://my.greview.gr/css_newspaper.png

---

इसके ठीक इस समाधान columnization का हिस्सा है, और के लिए इस मामले मुझे नहीं ब्राउज़र-पार की देखभाल, लेकिन समस्या में यहां बताया गया है कि मैं 2 अंतिम कॉलम के शीर्ष पर, मीडिया div की स्थिति को कैसे कॉन्फ़िगर कर सकता हूं, और मुख्य आलेख के टेक्स्ट ओवरलैप को रोक सकता हूं! http://www.quirksmode.org/css/multicolumn.html

---

एक तरह से यह दो स्तंभों पर तस्वीर के साथ काम करने के लिए:

Answer 1

आप आधुनिक ब्राउज़रों का उपयोग कर रहे हैं, तो आप column बिट्स css3 से

div#multicolumn1 { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
} 

यहां अधिक पढ़ें इस्तेमाल कर सकते हैं निम्नलिखित करना है:

1. सेट करें, इसे देने के एक position:relative

2. सेट अपने multicolumn div, यह एक fixed चौड़ाई

3. जोड़ने दो स्पेसर spans, प्रत्येक स्तंभ तुम पर छवि अवधि करना चाहते हैं के लिए एक दे। उन्हें display: block पर सेट करें। एनबी आपको शीर्ष पर उपयुक्त स्थान बनाने के लिए सामग्री में अपनी स्थिति के साथ बेझिझक होना होगा।

4. छवि को अपने स्थान पर सेट करने के लिए position:absolute का उपयोग करें।

आम तौर पर आप column-span का प्रयोग करेंगे और एक नंबर लेने ... लेकिन यह है कि किसी भी ब्राउज़र है कि मैं के बारे में पता में समर्थित नहीं है। (वे केवल all या none का समर्थन करते हैं)।

सीएसएस

div#wrapper{ 
    width:500px; 
    border:1px solid red; 
    padding:1em; 
    position:relative; 
} 

div#multicolumn1 { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -moz-column-width:100px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    -webkit-column-width:100px; 
    column-count: 3; 
    column-gap: 20px; 
    column-width:100px; 
} 

div#img{ 
    height:70px; 
    width:350px; 
    border:1px solid green; 
    position:absolute; 
    right:10px; 
} 

span.bg1{ 
    width:100%; 
    height:100px; 
    display:block; 
} 

उदाहरण:http://jsfiddle.net/jasongennaro/HgmKg/2/

Answer 2

आपके सवाल का जवाब क्लासिक सीएसएस कॉलम है। इस पर पहले से ही किसी अन्य उत्तर में चर्चा की जा चुकी है। यह आपको कॉलम में ब्लॉक को विभाजित करने की क्षमता देता है।

दूसरे उत्तर में आपने कहा है कि यह आपके लिए काम नहीं कर सकता है क्योंकि आप ग्राफिक तत्वों को स्थितिबद्ध करना चाहते हैं और उनके चारों ओर टेक्स्ट प्रवाह करना चाहते हैं।

सीएसएस कॉलम के साथ यह संभव हो सकता है - मुझे कबूल करना है कि मैंने कोशिश नहीं की है, लेकिन टेक्स्ट सामान्य रूप से ग्राफिक्स के आसपास प्रवाह करना संभव है, इसलिए मुझे नहीं लगता कि यह क्यों संभव नहीं होना चाहिए कॉलम के साथ, क्योंकि इसे इसके अंदर के पाठ के लेआउट के अलावा किसी भी अन्य ब्लॉक की तरह काम करना चाहिए।

हालांकि, यदि यह आपके लिए पर्याप्त नहीं है, तो सीएसएस सीएसएस क्षेत्र नामक एक और समाधान प्रदान करता है। यह एक तंत्र है जो आपको यह निर्दिष्ट करने की अनुमति देता है कि पाठ तत्व पर दूसरे से बह सकता है। आप अपने ब्लॉक को चेन कर सकते हैं और उन्हें किसी भी तरह की स्थिति में रख सकते हैं। यह आपको अपने पृष्ठ को बाहर रखने की पूर्ण स्वतंत्रता देता है हालांकि आपको पसंद है।

आप यहाँ इसके बारे में और अधिक जानकारी प्राप्त कर सकते हैं: http://msdn.microsoft.com/en-us/ie/hh272902#_CSSConnected

यह मूल रूप से एक पूरी तरह से मुक्त पेज लेआउट प्रणाली है, और आप के लिए क्या चाहिए, तो होना चाहिए।

यह अच्छी खबर है।

बुरी खबर यह है कि इस समय सीएसएस क्षेत्र में लगभग शून्य ब्राउज़र समर्थन है। ब्राउज़र समर्थन पर पूरी जानकारी के लिए CanIUse देखें। जैसा कि आप उस लिंक पर टेबल से देख सकते हैं, यह कुछ ब्राउज़रों में आ रहा है, लेकिन इसे लागू करने के बाद भी यह उपयोग करने के लायक बनाने के लिए पर्याप्त उपयोगकर्ता समर्थन होने से कुछ अलग होगा।

जो शर्म की बात है क्योंकि यह वही है जो आप खोज रहे हैं।