ملائي Column ويب سائيٽ ترتيب لاء سي ايس ڊي ڪئين استعمال ڪريو

ڪيترن سالن تائين، ايس ڊي جي سچا فيڪٽري، اڃا تائين ضروري آهي، ويب سائيٽ جي ترتيب ٺاهي ٿي. جيڪڏهن توهان جي ڊزائينز ڪيترن ئي شاخن کي سڏيو ويندو، توهان ڏانهن اشارو ڪيو . هن طريقي سان اهو مسئلو اهو آهي ته، ناقابل اعتبار پختگي باوجود، ويب ڊزائنر / ڊولپرز پيچيده سائيٽ ترتيب ٺاهڻ ۾ ڏيکاريا آهن، سي ايس ايس سچا ڪڏهن به هن انداز ۾ استعمال نٿا ڪن.

جڏهن ته سچا ۽ سي ايس ايس جي پوسٽنگ ڪيترن ئي سالن تائين ويب ڊزائينر ۾ جڳهه تي يقيني بڻجن ٿيون، سي ڊي گرڊ ۽ فڪسڪس باڪس سميت ترتيب ڏنل جديد ٽيڪنالاجيون ويب ڊيزائن کي پنهنجي سائيٽ جي ترتيب ٺاهي رهيا آهن. ٻي نئين ٺاهيل ٽيڪنڪ جو ڏيکاري ٿو ته تمام گهڻو ڪجهه امڪاني سيٽنگ آهي CSS CSS Multiple Columns.

سي ايس ڊي ڪالون ڪجهه سالن تائين تقريبا ٿي چڪا آهن، پر پراڻن برائوزرن ۾ مدد جي کوٽ (خاص طور تي انٽرنيٽ ايڪسپلورر جي پراڻن ورزن) انهن شقن کي استعمال ڪرڻ کان ڪيترن ئي ويب پروفيسر کي پنهنجون پيداوار ڪم ۾ رکيا آهن.

IE جي انهن پراڻن نسخن جي مدد سان، ڪجهه ويب ڊزائينر هاڻي نئين ايس ايس ڊي ترتيب جي اختيارن سان استعمال ڪري رهيا آهن، سي ڊي ڪالون شامل آهن، ۽ انهي کي ڳولي رهيا آهن ته انهن وٽ انهن جي بلڪل وڌيڪ ڪنٽرول سان مقابلو آهي.

سي ايس ڊيس جو بنياديات

جيئن ته هن جو نالو مشاهدو ڪيو ويو آهي، سي ايس پي جي هڪ ٻه کالم (پڻ CSS3 کثير کالم ترتيب) جي طور تي توهان مواد کي سيٽ واري ڪالمن ۾ ورهايو وڃي ٿو. جيڪي توهان کي استعمال ڪري سگهجن ٿا اهي سڀ کان وڌيڪ سي ڊي ايس جي خاصيتون آهن:

ڳڻپ جي ڳڻپ لاء، توهان کي چاهيو ته ڪلمن جو تعداد بيان ڪريو. ڪالمن جي خلا گٽٽر ٿي ويندا آھن يا انھن شاخن جي وچ ۾. برائوزر انهن قدرن کي وٺي سگھو ٿا ۽ انهن شين جي مواد کي جنهن ۾ توهان بيان ڪيو وڃي انهن کي ورهايو ويندو.

عملي طور تي سي ڊي جو هڪ عام مثال ڪيترن ئي شاخن ۾ متن جي مواد جي هڪ بلاڪ کي ڪيترن ئي شاخن ۾ ورهايو ويندو، جيڪو توهان اخبار جي مضمون ۾ ڏسي سگهو ٿا. چوندا آهن توهان کي هيٺ ڏنل HTML مارڪ اپ آهي (ياد رکو ته مثال طور، مقصد صرف هڪ پيراگراف جي شروعات کي رکندي آهيان، جڏهن ته عملي طور تي هن مارڪپ ۾ مواد جي متعدد پيراگراف هجڻ).

توهان جي مضمون جو عنوان

ٽيڪسٽ جو تمام پيراگراف تصور ڪريو ...

جيڪڏهن توهان انهن سي ايس جي شالن کي لکيو آهي ته:

.content {-moz-column-count-count: 3؛ ويڪرڪ ڪالڪر جي ڳڻپ: 3؛ ڪالهه نمبر: 3؛ -موز-ڪالم-فوٽ: 30px؛ -ٻارڪ-ڪالم-فوٽ: 30px؛ ستون-گپ: 30px؛ }

هي سيسي قاعده "مواد" ڊويزن ۾ 3 برابر ڪالمن ۾ ورهائي سگهندي انهن جي وچ ۾ 30 پکسل جي فرق سان. جيڪڏهن توهان 3 جي بدران ٻه ڪالمن چاهيندا هئا، توهان رڳو اهو قدر تبديل ڪري سگهندا ۽ برائوزر انهن شاخن جي نئين چوٿين کي ڪتب آڻيندو هو انهي مواد کي الڳ ڪري ڇڏي. ياد ڪريو ته اسين اسين وينڊر-پريفڪسيلز ملڪيت پهريون ڀيرو استعمال ڪندا آهيون، بعد ۾ غير اڳوڻي بيان ڪيل.

جيترو آسان اهو آهي، انهي طريقي سان هن جو استعمال ويب سائيٽ جي استعمال لاء قابل ذڪر آهي. ها، توهان هڪٻئي شاخن ۾ مواد جي هڪ گروپ کي ورهائي سگهو ٿا، پر اهو ويب لاء بهترين پڙهڻ وارو تجربو نه هوندو، خاص طور تي جڏهن ته انهن شاخن جي ڊيگهه اسڪرين جي "فو" هيٺان ٿي پوي.

پڙهندڙن کي پوء مڪمل مواد پڙهڻ لاء مٿي ۽ بند ڪري ڇڏين ها. اڃا تائين، سي ايس ايس جي ڪالمن جو پرنسپل بلڪل آسان آهي جيئن توهان هتي ڏٺا، ۽ اهو صرف ڪجهه پيراگراف جي مواد کي تقسيم ڪرڻ کان وڌيڪ استعمال ڪرڻ لاء استعمال ڪيو وڃي ٿو - اهو، حقيقت ۾، ترتيب لاء استعمال ڪري سگهجي ٿو.

سي ايس ڊي سان ڪالھ جوڙ

چوندا آهن ته توهان وٽ مواد جو علائقو وٽ هڪ ويب پيج آهي جنهن ۾ مواد جي 3 کالم آهن. اها هڪ عام قسم جي ويب سائيٽ ترتيب آهي، ۽ انهن 3 شاخن کي حاصل ڪرڻ لاء، توهان عام طور تي ڊويزن کي فلوٽ ڪنداسين جيڪي. ۾ سي ايس جي گهڻن شاڪرن سان، اهو ايترو آسان آهي.

هتي ڪجهه نمونہ HTML آهي:

div > اسان جي بلاگ مان

مواد هتي ويندا ها ...

ايندڙ واقعا

مواد هتي ويندا ها ...

هنن ڪيترن ئي شاخن کي ٺاهڻ لاء سي ايس ايس شروع ڪيو جيڪي توهان اڳ ڏٺو:

.content {-moz-column-count-count: 3؛ ويڪرڪ ڪالڪر جي ڳڻپ: 3؛ ڪالهه نمبر: 3؛ -موز-ڪالم-فوٽ: 30px؛ -ٻارڪ-ڪالم-فوٽ: 30px؛ ستون-گپ: 30px؛ }

هاڻي، چئلينج هتي هي آهي، ڇاڪاڻ ته برائوزر هن مواد کي تقسيم ڪرڻ چاهي ٿو، تنهن ڪري جيڪڏهن هنن حصن جي مواد جي ڊيگهه مختلف آهي، انهي برائوزر اصل ۾ انفرادي ڊويزن جي مواد کي تقسيم ڪندو، انهي کي شامل ڪرڻ هڪ ڪال ڪال ۽ وري اڳتي وڌائڻ ۾ وڌو (توهان تجربو هلائڻ لاء هي ڪوڊ استعمال ڪندي ڏسي ۽ هر ڊويزن اندر مواد جي مختلف لمبائي شامل ڪري سگهو ٿا)!

اھو ڇا آھي جيڪو توھان چاھيو ٿا. توهان انهن مان هر هڪ ڌار ڌار ڌار ڪالمن ٺاهڻ لاء چاهيو ٿا، تنهنڪري انفرادي ڊويزن جي مواد ڪيتري ويل يا ننڍو ٿي سگهي ٿي، توهان ڪڏهن به اهو تقسيم نٿا چاهيو. توهان سي ايس ايس جي هڪ اضافي لائين شامل ڪندي هن حاصل ڪري سگهو ٿا:

.نٽ ڊوي {ڊسپلي: ان لائن-بلا؛ }

اهو انهن ڊويزن کي مجبور ڪندو جيڪي "مواد" اندر هوندا آهن باقي برقرار رهڻ لاء، جيئن ته برائوزر ڪيترن ئي شاخن ۾ هن کي الڳ ڪري ٿو. اڃا بهتر، ڇو ته اسان هتي مقرر ڪيل چوٽي کي ڪجهه به نه ڏني آهي، هنن ڪالمن کي برائوزر کي تبديل ڪرڻ جي طور تي خودڪار طريقي سان ٺهرايو ويندو، انهن کي ويب سائيٽ جي لاء مثالي ايپليڪيشن ٺاهڻ. انهي سان گڏ "ان لائن-بلاڪ" انداز ۾ انداز، توهان جي 3 حصن مان هر مواد جي مختلف ڪالمن واري هوندي.

ڪالمن جي چوٿين کي استعمال ڪندي

هتي هڪ ٻيو ملڪيت آهي جنهن جي "ڪالمن نمبر" جيڪا توهان استعمال ڪري سگهو ٿا، ۽ توهان جي جوڙجڪ جي ضرورتن تي منحصر ڪري ٿي، اهو شايد توهان جي سائيٽ لاء بهتر چونڊ هوندو. اهو آهي "ڪمان چوٽي". اڳوڻي ظاهر ڪيل ظاهر ڪيل ساڳئي HTML مارڪ اپ استعمال ڪريو، اسان ان جي بدران اسان سان ايس ايس ڊي سان ڪري سگھن ٿا.

.content {-موز-ڪالم-چوٽي: 500px؛ ڇائيٽل-ڪالمن جي چوٽي: 500px؛ ڪالهه چوٽي: 500px؛ -موز-ڪالم-فوٽ: 30px؛ -ٻارڪ-ڪالم-فوٽ: 30px؛ ستون-گپ: 30px؛ } .نٽ ڊوي {ڊسپلي: ان لائن-بلا؛ }

انهي طريقي سان اهو ڪم آهي ته برائوزر هن "ڪالمن-چوٽي" کي انهي ڪالمن جي وڌ ۾ وڌ قدر استعمال ڪري ٿو. پوء جيڪڏهن برائوزر ونڊو 500 پکسل کان وڏن کان گهٽ آهي، انهن ٽن حصن ۾ هڪ اڪيلو ڪالمن ۾ ويهندا، هڪ ٻئي جي چوٽي ۾. هي هڪ عام ترتيب آهي جيڪو ننڍو / ننڍي اسڪرين جي ترتيب لاء استعمال ڪيو ويو آهي.

جئين ته برائوزر جي چوٿين وڌايو ويو آهي 2 ڪالمن وارن مخصوص ڪالمن جي گنجائش سان ڪافي فوٽ ڪرڻ لاء، برائوزر پاڻمرادو ڪالمن جي ترتيب مان ٻه شاخن ڏانهن وڃو. اسڪرين جي چوڪ ۾ وڌو ۽ آخرڪار، توهان هڪ 3 ڪالمنڊ ڊزائن وٺندا، اسان مان هر ٽن حصن سان گڏ پنهنجي ئي ڪالمن ۾ ڏيکاريون. ٻيهر، اهو هڪ بهترين طريقو آهي، قبول ڪرڻ، متحرڪ دوستو ترتيب، ۽ توهان کي ترتيب واري انداز کي تبديل ڪرڻ لاء ميڊيا سوالن کي استعمال ڪرڻ جي ضرورت ناهي.

ٻيا ڪالمن جا خاصيتون

هتي شامل ڪيل خاصيتن جي علاوه، "ڪالون-قاعدن" لاء خاصيتون آهن، رنگ، انداز، ۽ چوٿون قدر سميت توهان جي ڪالمن جي وچ ۾ قاعدن ٺاهڻ جي اجازت ڏين ٿيون. اهي سرحدون بدران استعمال ڪيا ويندا جيڪڏهن توهان چاهيو ٿا ته ڪجهه لڪيرون توهان جي ڪالمن کي الڳ ڪرڻ لاء.

تجربو ڪرڻ جو وقت

في الحال، سي ايس ڊي ملڪي ڪالمن جي ترتيب تمام سٺي سهڪار آهي. فيڪسسڪس سان، ويب استعمال ڪندڙن جو 94٪ کان وڌيڪ انهن شالن کي ڏسي سگهندا آهن، ۽ انهي جي حمايت ٿيل گروپ واقعي بلڪل صرف انٽرنيٽ ايڪسپلورر جي پراڻن نسخن هوندي، جيڪا توهان هر طرح جي حمايت نه ٿي سگهندي.

تعاون جي هن سطح سان هاڻي، ڪنهن به سبب نه آهي ته CSS کالم سان تجربو شروع ڪرڻ ۽ انهن شين جي پيداوار ٺاهڻ ۾ تيار ويب سائيٽون. توهان هن مضمون ۾ پيش ڪيل HTML ۽ سي ايس استعمال ڪندي پنهنجي تجربن کي شروع ڪري سگهو ٿا ۽ مختلف اقدار سان ڀرسان راند ڪرڻ لاء ڇا توهان جي سائيٽ جي ترتيب جي ضرورت لاء بهترين ڪم آڻيندي.