تنسيق متفاعل للأعمدة النصوص أو الصور بواسطة Css فقط !

السلام عليكم

كل مصممي المواقع أصبح شغلهم الشاغل هو تصميم موقع متفاعل " Responsive " لذلك اليوم أريد أن أقدم لكم كود بسيط عن تنظيم معرض صور مثلا أو أعمدة للمقالات و يكون متفاعل مع كامل الشاشات .

 أقصد كلما غيرت حجم العرض فإن الأعمدة سوف تتنسق فيما بينها و تعرض لك بالقياسات المناسبة و يمكنك معاينة الشكل النهائي المتفاعل مع كل الشاشات من هنا للصور

عمود نصوص معرض صور

معرض صور

الآن هذا هو الكود css بالنسبة للصور :

body {
    padding:5px;
}
/* (الهوامش = 5) */
 div {
    -webkit-column-width:150px;
    -moz-column-width:150px;
    column-width:150px;
    / * نفس الهامش السفلي لكل العناصر * /
    -webkit-column-gap:5px;
    -moz-column-gap:5px;
    column-gap:5px;
}
img {
    display:block;
    /* التمديد */
    width:100%;
    height:auto;
    background-color:silver;
/* الهامش السفلي */
    margin:0 0 5px 0;
}

و هنا كود html للإستعمال :

<center>
<div>
  <img alt="" width="150" height="200" src="https://1.bp.blogspot.com/-0C941BEgIw4/WNbzQxZSbZI/AAAAAAAABn8/dHAkTS2TseYTxxbvjJHkD5zjTAlGvOhYACLcB/s1600/232full-sofiane-feghouli.jpg"/>
    <img alt="" width="150" height="250" src="https://4.bp.blogspot.com/-nvVD5p9sgvs/WNbzTp3r11I/AAAAAAAABoQ/efildAGzw_kwpE4tm-Xc23MQXodFJ6LvgCLcB/s1600/faouzi-ghoulam-84272.jpg"/>
    <img alt="" width="150" height="200" src="https://4.bp.blogspot.com/-cQEh42N71TU/WNbzQ2MfLEI/AAAAAAAABoA/_6-VRYXVLEUruCe_k8lwCxuJYv0xG_dZgCLcB/s1600/366309.png" />
    <img alt="" width="150" height="150" src="https://4.bp.blogspot.com/-WEmT4FLGN3E/WNbzSdcG69I/AAAAAAAABoI/IQD3DbR4XBMahvVzifoqj0a6G35xVxgHACLcB/s1600/Thierry-Henry-Premier-League-Leicester-Mahrez-699675.jpg" />
    <img alt="" width="150" height="100" src="https://4.bp.blogspot.com/-7ftcdbga0Dw/WNbzUC9KwdI/AAAAAAAABoU/HI0BpBJ-EEwaG5JCNXxoMePMYHEjuazHQCLcB/s1600/elle-01-hot-soccer-players-algeria-essaid-belkalem-xln1.jpg" />
    <img alt="" width="150" height="100" src="https://4.bp.blogspot.com/-YZ4777M9MgA/WNbzWxrXuoI/AAAAAAAABoc/_Tpnkt1rKAA565LQZ1z_tBTeqtb_v8cjQCLcB/s1600/slimani.jpg" />
    <img alt="" width="150" height="100" src="https://3.bp.blogspot.com/-shvCrbByifw/WNbzSkrB65I/AAAAAAAABoM/rEclCZSdbWor_U0INTJ4I9sm2faM2pzuwCLcB/s1600/brahimi-porto-3.jpg" />
    <img alt="" width="150" height="100" src="https://1.bp.blogspot.com/-fMKpBEOVlsk/WNbzWMD1_7I/AAAAAAAABoY/Gawii6KYBfIRSQdyaGPqiTPpWhrc5grMACLcB/s1600/soudani1.jpg" />
    <img alt="" width="150" height="200" src="https://2.bp.blogspot.com/-qC7BQhL8NmE/WNbzQpFlQ4I/AAAAAAAABn4/PhFWFcmsU8IL2jWpAKCd0M1n4jS8mY-qgCLcB/s1600/450312718.jpg" />
    <img alt="" width="150" height="250" src="https://4.bp.blogspot.com/-UVCziZ4cIWs/WNbzRj-_xyI/AAAAAAAABoE/zgf_OWXm8UojykHusIlQXxDUj5YuV_TcACLcB/s1600/Slimani%2B-%2B27-09.JPG" />
    <img alt="" width="150" height="150" src="https://2.bp.blogspot.com/-E3yfHGnpYJs/WNbzY32LP2I/AAAAAAAABog/LyC9UvkPBMMUueNIGFpKYFoxeeYeCrNowCLcB/s1600/feghouli-stade-west-ham.jpeg" />
    <img alt="" width="150" height="100" src="https://1.bp.blogspot.com/-HL5zd0wITJg/WNb2qJzg3cI/AAAAAAAABpE/uoGzffxNbPoa6hX5VRFuAe5XQ9c3QBgCgCLcB/s1600/_OViT8Da_400x400.png" />
    <img alt="" width="150" height="100" src="https://2.bp.blogspot.com/-pOdR_oLgEeo/WNb2pzQxPrI/AAAAAAAABpA/pwR9aZLXs4w2RJwmkHdN0cgfBPoJcobLgCLcB/s1600/mandi-nvo-nvo1.jpg" />
    <img alt="" width="150" height="150" src="https://3.bp.blogspot.com/-J1uLLxEEepc/WNb2qRfeGtI/AAAAAAAABpI/LGw5o8ap7zAEwQ672GvcZzD2C9q6gWG7ACLcB/s1600/meilleur-gardien-de-but-rais-mbolhi-candidat-au-titre.jpg" />
    <img alt="" width="150" height="200" src="https://3.bp.blogspot.com/-PtDADq-MJVg/WNb2nsAQ_nI/AAAAAAAABo4/B0WfTo9JIIQGdjea9RzlYB7giDflZcbzACLcB/s1600/Nabil-Bentaleb.jpg" />
    <img alt="" width="150" height="150" src="https://3.bp.blogspot.com/-O8gN5Y4kJ0c/WNb2pbaT6-I/AAAAAAAABo8/ojEtqKxSUhI3Rw0x3GtdvTBIqC5YlxuswCLcB/s1600/aissa-mandi-algerie_91969_w620.jpg" />
    <img alt="" width="150" height="150" src="https://1.bp.blogspot.com/-8mVddqQHppY/WNb2nZ6fgSI/AAAAAAAABo0/S4g7UTNlWto-Gsck4W6YgYbBt9imFTRqQCLcB/s1600/Saphir-Taider.jpg" />
</div>
</center> 

أعمدة نصوص

و هنا css تنسيق النصوص المتفاعل :

  body {
    direction:rtl;
    background-color:white;
    padding:5px;
    margin:0;
    font:normal normal 12px/1.4 Arial, Sans-Serif;
}
.container {
    -webkit-column-width:150px;
    -moz-column-width:150px;
    column-width:150px;
    -webkit-column-gap:5px;
    -moz-column-gap:5px;
    column-gap:5px;
}
.item {
    display:inline-block;
    background-color:#259CDC;
    margin:0 0 5px 0;
    padding:10px;
    color:black;
}

و هنا كود html للإستعمال :

<center>
<div class="container">
    <div class="item">نص عشوائي أكتب هنا ما تريد ، زاوية مبرمج هي مدونة إلكترونية لتطوير مواقع الويب و المدونات العربية و تقديم دروس في البرمجة و التصميم مع تقديم إضافات و قوالب مجانية و جاهزة للإستخدام </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item"> نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">إن الالتزام بقراءة اتفاقية الاستخدام وتطبيق ما ورد فيها هو الهدف الأساسي من وضع هذه الاتفاقية . لذلك يجب عليك أن تقوم بقراءة وبدقة اتفاقية استخدام مدونة "زاوية مبرمج" والتي عنوانها الإليكتروني www.angle47.com  وذلك لتطبيق جميع البنود الواردة في الاتفاقية ، ويعني تصفحك للموقع تعهدك التام بالالتزام بهذه الاتفاقية، وذلك حفاظا علي الحقوق العامة والخاصة، وحقوق الطبع والنشر والنسخ، وكذلك الحقوق الفكرية، والحقوق بصفة عامة.</div>
    <div class="item">نص عشوائي أكتب هنا ما تريد ، زاوية مبرمج هي مدونة إلكترونية لتطوير مواقع الويب و المدونات العربية و تقديم دروس في البرمجة و التصميم مع تقديم إضافات و قوالب مجانية و جاهزة للإستخدام </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item"> نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">نص عشوائي أكتب هنا ما تريد ، زاوية مبرمج هي مدونة إلكترونية لتطوير مواقع الويب و المدونات العربية و تقديم دروس في البرمجة و التصميم مع تقديم إضافات و قوالب مجانية و جاهزة للإستخدام </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">نص عشوائي أكتب هنا ما تريد ، زاوية مبرمج هي مدونة إلكترونية لتطوير مواقع الويب و المدونات العربية و تقديم دروس في البرمجة و التصميم مع تقديم إضافات و قوالب مجانية و جاهزة للإستخدام </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item"> نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">نص عشوائي أكتب هنا ما تريد ، زاوية مبرمج هي مدونة إلكترونية لتطوير مواقع الويب و المدونات العربية و تقديم دروس في البرمجة و التصميم مع تقديم إضافات و قوالب مجانية و جاهزة للإستخدام </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item"> نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">إن الالتزام بقراءة اتفاقية الاستخدام وتطبيق ما ورد فيها هو الهدف الأساسي من وضع هذه الاتفاقية . لذلك يجب عليك أن تقوم بقراءة وبدقة اتفاقية استخدام مدونة "زاوية مبرمج" والتي عنوانها الإليكتروني www.angle47.com  وذلك لتطبيق جميع البنود الواردة في الاتفاقية ، ويعني تصفحك للموقع تعهدك التام بالالتزام بهذه الاتفاقية، وذلك حفاظا علي الحقوق العامة والخاصة، وحقوق الطبع والنشر والنسخ، وكذلك الحقوق الفكرية، والحقوق بصفة عامة.</div>
    <div class="item">إن الالتزام بقراءة اتفاقية الاستخدام وتطبيق ما ورد فيها هو الهدف الأساسي من وضع هذه الاتفاقية . لذلك يجب عليك أن تقوم بقراءة وبدقة اتفاقية استخدام مدونة "زاوية مبرمج" والتي عنوانها الإليكتروني www.angle47.com  وذلك لتطبيق جميع البنود الواردة في الاتفاقية ، ويعني تصفحك للموقع تعهدك التام بالالتزام بهذه الاتفاقية، وذلك حفاظا علي الحقوق العامة والخاصة، وحقوق الطبع والنشر والنسخ، وكذلك الحقوق الفكرية، والحقوق بصفة عامة.</div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item"> نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">إن الالتزام بقراءة اتفاقية الاستخدام وتطبيق ما ورد فيها هو الهدف الأساسي من وضع هذه الاتفاقية . لذلك يجب عليك أن تقوم بقراءة وبدقة اتفاقية استخدام مدونة "زاوية مبرمج" والتي عنوانها الإليكتروني www.angle47.com  وذلك لتطبيق جميع البنود الواردة في الاتفاقية ، ويعني تصفحك للموقع تعهدك التام بالالتزام بهذه الاتفاقية، وذلك حفاظا علي الحقوق العامة والخاصة، وحقوق الطبع والنشر والنسخ، وكذلك الحقوق الفكرية، والحقوق بصفة عامة.</div>
    <div class="item">إن الالتزام بقراءة اتفاقية الاستخدام وتطبيق ما ورد فيها هو الهدف الأساسي من وضع هذه الاتفاقية . لذلك يجب عليك أن تقوم بقراءة وبدقة اتفاقية استخدام مدونة "زاوية مبرمج" والتي عنوانها الإليكتروني www.angle47.com  وذلك لتطبيق جميع البنود الواردة في الاتفاقية ، ويعني تصفحك للموقع تعهدك التام بالالتزام بهذه الاتفاقية، وذلك حفاظا علي الحقوق العامة والخاصة، وحقوق الطبع والنشر والنسخ، وكذلك الحقوق الفكرية، والحقوق بصفة عامة.</div>
    <div class="item">نص عشوائي أكتب هنا ما تريد ، زاوية مبرمج هي مدونة إلكترونية لتطوير مواقع الويب و المدونات العربية و تقديم دروس في البرمجة و التصميم مع تقديم إضافات و قوالب مجانية و جاهزة للإستخدام </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item"> نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي  نص عشوائي نص عشوائي </div>
    <div class="item">كل المواضيع و التدوينات التي أقوم بنشرها على موقعي هي مجهودي الخاص فلا أقوم بالنقل المباشر و لا أكتب تدوينة او أقوم بإضافة قبل أن أتحقق منها آولا و أتأكد أنها سليمة و شغالة و إن وجدتم تشابه في المحتوى بين تدويناتي و تدوينات في مواقع أخرى فهذا متوقع بسبب أن مصادر المعلومات قد تكون واحدة. </div>
    <div class="item">إن الالتزام بقراءة اتفاقية الاستخدام وتطبيق ما ورد فيها هو الهدف الأساسي من وضع هذه الاتفاقية . لذلك يجب عليك أن تقوم بقراءة وبدقة اتفاقية استخدام مدونة "زاوية مبرمج" والتي عنوانها الإليكتروني www.angle47.com  وذلك لتطبيق جميع البنود الواردة في الاتفاقية ، ويعني تصفحك للموقع تعهدك التام بالالتزام بهذه الاتفاقية، وذلك حفاظا علي الحقوق العامة والخاصة، وحقوق الطبع والنشر والنسخ، وكذلك الحقوق الفكرية، والحقوق بصفة عامة.</div>
</div>
  </center> 

و لمعاينة النتيجة على 10 شاشات مختلفة زوروا الروابط التالية :

عمود نصوص معرض صور

أتمنى أن تستفيدوا من هذا الدرس و نلتقي في تدوينات أخرى