Amal Suhail نشر 28 يوليو 2023 أرسل تقرير مشاركة نشر 28 يوليو 2023 عندي مشككله في ترتيب الصور للجانب الاخر مثل صوره الاولى مرتبه مع الكلام 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 28 يوليو 2023 أرسل تقرير مشاركة نشر 28 يوليو 2023 هل يمكنك مشاركة ملفات المشروع بشكل نصي بحيث يمكنني تجربتها وتحديد مكان الخطأ بسهولة، يمكنك مشاركة ملفات المشروع عبر ضغطها كما يظهر في الصورة : اما بشكل عام فيمكنك جعل الصور بجانب النص عن طريق اضافة الصورة قبل النص + و ان تكون الصورة والنص في عنصر من النوع block مثل div : <div> <img src="examole.com" /> <p>my text</p> </div> كذلك الامر يمكنك تحقيق النتيجة نفسها باستخدام CSS، وسيتغير تعقيد الحل بحسب الشكل النهائي الذي تحاول الوصول إليه. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hessen Nasser نشر 28 يوليو 2023 أرسل تقرير مشاركة نشر 28 يوليو 2023 بتاريخ 1 ساعة قال Amal Suhail: عندي مشككله في ترتيب الصور للجانب الاخر مثل صوره الاولى مرتبه مع الكلام لحل هذه المشكلة، يمكنك استخدام خاصية Flexbox لتنظيم عناصر العنصر الأب "post" بطريقة أفضل. يمكنك القيام بذلك باستخدام خاصية "align-items" لتوجيه العناصر عموديًا إلى المنتصف واستخدام "justify-content" لتحديد كيفية توزيع العناصر أفقيًا هناك مساحة فارغة بين الصوره وبين النص . .post { display: flex; /* لتفعيل خاصية Flexbox */ align-items: center; //تحديد كيفية توزيع العناصر عموديًا justify-content: space-between; // تحديد كيفية توزيع العناصر أفقيًا } وبعد ذلك يمكنك تخصيص العناصر الداخليه علي حسب رغتبك في طريقة ظهورها. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Amal Suhail نشر 28 يوليو 2023 الكاتب أرسل تقرير مشاركة نشر 28 يوليو 2023 بتاريخ 2 ساعة قال عمر قره محمد: هل يمكنك مشاركة ملفات المشروع بشكل نصي بحيث يمكنني تجربتها وتحديد مكان الخطأ بسهولة، يمكنك مشاركة ملفات المشروع عبر ضغطها كما يظهر في الصورة : اما بشكل عام فيمكنك جعل الصور بجانب النص عن طريق اضافة الصورة قبل النص + و ان تكون الصورة والنص في عنصر من النوع block مثل div : <div> <img src="examole.com" /> <p>my text</p> </div> كذلك الامر يمكنك تحقيق النتيجة نفسها باستخدام CSS، وسيتغير تعقيد الحل بحسب الشكل النهائي الذي تحاول الوصول إليه. مو طالع عندي الارشيف 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 29 يوليو 2023 أرسل تقرير مشاركة نشر 29 يوليو 2023 بتاريخ 16 ساعة قال Amal Suhail: مو طالع عندي الارشيف عليك بتحميل برنامج WinRAR فهو برنامج أساسي لضغط وفك ضغط الملفات والمجلدات، وستجدي هنا رابط التحميل للنسخة العربية لإصدار ويندوز 32 و 64: 64 لغة عربية https://www.win-rar.com/fileadmin/winrar-versions/winrar-x64-622ar.exe 32 لغة عربية https://www.win-rar.com/fileadmin/winrar-versions/winrar-x32-622ar.exe وإليك روابط اللغة الإنجليزية: 64 لغة إنجليزية: https://www.win-rar.com/fileadmin/winrar-versions/winrar/winrar-x64-622.exe 32 لغة إنجليزية: https://www.win-rar.com/fileadmin/winrar-versions/winrar/winrar-x32-622.exe وبعد تثبيته تستطيعي ضغط المجلد كما أشار إليك عمر. وبالنسبة للتصميم الذي تريدينه، فمن الأفضل استخدام Flexbox من أجل تنفيذه، كالتالي: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>تنسيق الصور والنص بشكل مربع وبعرض 100%</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; align-items: flex-start; padding: 20px; } .box { display: flex; align-items: center; width: 100vw; border: 2px solid #000; border-radius: 10px; overflow: hidden; } .box img { max-width: 200px; } .box p { padding: 10px; } </style> </head> <body> <div class="container"> <div class="box"> <img src="https://placehold.co/600x400/orange/white" alt="صورة 1"> <p>نص جهة اليمين 1</p> </div> <div class="box"> <img src="https://placehold.co/600x400/orange/white" alt="صورة 2"> <p>نص جهة اليمين 2</p> </div> <div class="box"> <img src="https://placehold.co/600x400/orange/white" alt="صورة 3"> <p>نص جهة اليمين 3</p> </div> <!-- يمكنك إضافة المزيد من الأزواج الصور والنصوص هنا --> </div> </body> </html> ولاحظي أنني استخدمت خاصية flex-wrap: wrap من أجل عرض الحاويات أسفل بعضها، فبدونه ستظهر بجانب بعضها وليس أسفل بعضها. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Amal Suhail نشر 29 يوليو 2023 الكاتب أرسل تقرير مشاركة نشر 29 يوليو 2023 بتاريخ 19 ساعة قال عمر قره محمد: هل يمكنك مشاركة ملفات المشروع بشكل نصي بحيث يمكنني تجربتها وتحديد مكان الخطأ بسهولة، يمكنك مشاركة ملفات المشروع عبر ضغطها كما يظهر في الصورة : اما بشكل عام فيمكنك جعل الصور بجانب النص عن طريق اضافة الصورة قبل النص + و ان تكون الصورة والنص في عنصر من النوع block مثل div : <div> <img src="examole.com" /> <p>my text</p> </div> كذلك الامر يمكنك تحقيق النتيجة نفسها باستخدام CSS، وسيتغير تعقيد الحل بحسب الشكل النهائي الذي تحاول الوصول إليه. amal.rar 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 29 يوليو 2023 أرسل تقرير مشاركة نشر 29 يوليو 2023 بتاريخ منذ ساعة مضت قال Amal Suhail: amal.rar 532.21 kB · 1 تنزيل يفضل استخدام flexbox حيث يسهل عملية تنفيذ التخطيط الذي تريده كما في التعديل التالي ملف style.css body { margin: 0; } header h1 { margin: 0; background-color: #bb9144; color: rgb(43, 128, 226); text-transform: uppercase; } .navbar { background: #ddd; margin: 0; padding-left: 0; } .navbar li { padding: 20px; display: inline-block; text-transform: uppercase; color: black; border-right: 1px solid #bb4444; } .container{ display: flex; } .container .posts { width: 70%; padding: 20px; display: inline-block; } .container .aside { width: 30%; padding: 20px; background: #bb9144; } .container .posts .post { padding: 20px; display: flex; } .container .posts .post .img img{ width: 100%; } .container .posts .post .img { width: 40%; } .container .post .post .text { width: 80%; } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد Fahmy نشر 2 أغسطس 2023 أرسل تقرير مشاركة نشر 2 أغسطس 2023 لحل هذه المشكلة، يجب البدء أولاً بتنظيم كود HTML، وبعد مراجعة الكود، وجد أن هناك وسم div مغلق بشكل زائد كود HTML بعد التعديل: <div class="container"> <div class="posts"> <div class="post"> <div class="img"> <img src="img/grop1.jpeg" /> </div> <div class="text"> <h2>good new try to find</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quas nostrum, coneaque, sed, nihil voluptate a soluta! Illum quaerat nihil architecto! </p> <a href="#"> read more</a> </div> </div> <hr /> <div class="post"> <div class="img"> <img src="img/grop1.jpeg" /> </div> <div class="text"> <h2>good new try to find</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quas nostrum, consequatur illo eligendi ea saepe inventore dolores laboriosam porro eaque, sed, nihil voluptate a soluta! Illum quaerat nihil architecto! </p> <a href="#"> read more</a> </div> </div> <hr /> <div class="clear:both"></div> <div class="post"> <div class="img"> <img src="img/grop1.jpeg" /> </div> <div class="text"> <h2>good new try to find</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quas nostrum, consequatur illo eligendi ea saepe inventore dolores laboriosam porro eaque, sed, nihil voluptate a soluta! Illum quaerat nihil architecto! </p> <a href="#"> read more</a> </div> </div> <hr /> <div class="clear:both"></div> </div> </div> وفي ملف Style.css قم بوضع هذه لاسطر (سوف يتم شرحها في الاسفل): .container .posts { width: 70%; padding: 20px; display: flex; flex-direction: column; } .post { display: flex; gap: 15px; } تم استخدام خاصية Flexbox في CSS لترتيب العناصر بشكل مناسب. يتم ذلك بإضافة الخاصية flex-direction: column; لحاوية الصنف "posts"، والتي تساعد على ترتيب العناصر بشكل رأسي. ثم يتم استخدام الخاصية display: flex; لترتيب كل حاوية تحمل الصنف "post" بشكل أفقي، حيث تكون الصورة على اليسار والنص على اليمين. أخيرًا، يمكن استخدام الخاصية gap: 15px; لإضافة مسافة بين النص والصورة، لتصبح النتيجة هكذا : اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Amal Suhail
عندي مشككله في ترتيب الصور للجانب الاخر مثل صوره الاولى مرتبه مع الكلام
رابط هذا التعليق
شارك على الشبكات الإجتماعية
7 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.