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







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

رمز Code:
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 للإستعمال :

رمز Code:
<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 تنسيق النصوص المتفاعل :

رمز Code:
  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 للإستعمال :

رمز Code:
<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>

http://www.traidnt.net/vb/traidnt2701537/