![]() |
|
في حال وجود أي مواضيع أو ردود
مُخالفة من قبل الأعضاء، يُرجى الإبلاغ عنها فورًا باستخدام أيقونة
( تقرير عن مشاركة سيئة )، و الموجودة أسفل كل مشاركة .
آخر المواضيع |
|
تنسيق متفاعل للأعمدة النصوص أو الصور بواسطة css فقط !
![]() |
|
أدوات الموضوع | انواع عرض الموضوع |
|
![]() |
رقم المشاركة : 1 | ||||
|
![]() السلام عليكم كود:
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; } كود:
<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; } كود:
<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> عمود النصوص - معرض الصور أتمنى أن تكونو قد إستفدتم من الإضافة نلتقي في تدوينة أخرى . للحصول على المزيد من الدروس زوروا مدونتي
|
||||
![]() |
![]() |
رقم المشاركة : 2 | |||
|
![]() أفدنا دوما أفاد الله |
|||
![]() |
![]() |
رقم المشاركة : 3 | |||
|
![]() 44444444444444444444 |
|||
![]() |
![]() |
رقم المشاركة : 4 | |||
|
![]() شكرااااااا لك |
|||
![]() |
![]() |
الكلمات الدلالية (Tags) |
css, gallery, layout, responsive |
|
|
المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى
المنتدى غير مسؤول عن أي إتفاق تجاري بين الأعضاء... فعلى الجميع تحمّل المسؤولية
Powered by vBulletin .Copyright آ© 2018 vBulletin Solutions, Inc