दो-स्तंभ पाठ लेआउट

यह विषय "divs और css का उपयोग करके आपके पृष्ठ पर दो कॉलम कैसे बनाएं" विषय पर मूल बातें की प्रस्तुति नहीं है। मेरा काम यह था कि एमएस वर्ड कैसे करता है, उसी तरह अखंड पाठ को दो कॉलम में विभाजित किया जाए। इसके लिए सीएसएस में कोई मानक टैग नहीं है, इसलिए मुझे समस्या को हल करने के लिए एक नखरे के साथ थोड़ा नृत्य करना पड़ा।

पाठ के साथ कॉलम की चौड़ाई उपयोगकर्ता द्वारा जानकारी की धारणा को आसानी से प्रभावित करती है। और इसलिए, वाइडस्क्रीन मॉनिटर की वर्तमान लोकप्रियता को देखते हुए, पाठ को स्तंभों में तोड़ना इसकी "पठनीयता" को काफी बढ़ाता है।

पाठ को कॉलम में तोड़ने के लिए, css और थोड़ी जावास्क्रिप्ट का उपयोग किया गया था। विभाजन एल्गोरिथ्म में केवल चार चरण होते हैं:

चरण 1

हम पाठ के लिए एक ब्लॉक बनाते हैं (उदाहरण में इसे "समाचार" कहा जाता है) और इसमें दो ब्लॉक डालें, जिसमें हमारा पाठ स्थित होगा। अब तक का सारा पाठ पहले कॉलम में है।

मेरे फ्रेंच फ़ोटोशॉप के लिए क्षमा करें, मैंने त्वरित चित्रण किया, मुझे लगता है कि अर्थ स्पष्ट होगा:

चरण 2

पहला चरण हमने पूरे पाठ को पहले कॉलम Col1 में निकाल दिया। अब, जावास्क्रिप्ट के साथ, हम सभी पाठ को दूसरे कॉलम में कॉपी करते हैं (चित्र में, पाठ विशेष रूप से एक ढाल के साथ बनाया गया है ताकि भविष्य में यह निर्धारित किया जा सके कि इसका ऊपरी हिस्सा कहाँ है और कहाँ निचला है):

चरण 3

सभी एक ही जावास्क्रिप्ट कॉलम Col1 और Col2 की वर्तमान ऊंचाई निर्धारित करते हैं। कॉलम Col2 नकारात्मक मार्जिन पर सेट है। मार्जिन स्तंभ की ऊंचाई से आधी होनी चाहिए। इस प्रकार, हम दूसरे कॉलम को ऊपर उठाते हैं, जिससे इसका निचला आधा भाग दिखाई देता है:

चरण 4

हम टेक्स्ट के सामान्य (पीले) ब्लॉक को कॉलम की आधी ऊंचाई के बराबर ऊंचाई पर सेट करते हैं। हम ओवरफ़्लो का उपयोग करके बाकी को ट्रिम करते हैं: छिपी हुई संपत्ति।





और परिणाम को देखो ।

एक निष्कर्ष के बजाय

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

मुझे इस तरह के विकल्प को लागू करने के कार्य का सामना नहीं करना पड़ा, लेकिन सिद्धांत रूप में यह हल किया जा रहा है। सभी छवियों में स्थिति होनी चाहिए: पूर्ण विशेषता, और जावास्क्रिप्ट का उपयोग करने वाले कॉलम के अंदर आयामों के साथ खाली तत्व बनाना आवश्यक होगा और छवि के नीचे एक सापेक्ष स्थिति के साथ निर्देशांक होगा (अन्यथा पाठ छवियों के नीचे छिप जाएगा)।