الصور راحو بنص الصفحه كيف انظمهم بنفس ترتيب الصوره الاولى

Amal Suhail · 28 يوليو 2023

عندي مشككله في ترتيب الصور للجانب الاخر مثل صوره الاولى مرتبه مع الكلام

عمر قره محمد · 28 يوليو 2023

هل يمكنك مشاركة ملفات المشروع بشكل نصي بحيث يمكنني تجربتها وتحديد مكان الخطأ بسهولة،

يمكنك مشاركة ملفات المشروع عبر ضغطها كما يظهر في الصورة :

اما بشكل عام فيمكنك جعل الصور بجانب النص عن طريق اضافة الصورة قبل النص + و ان تكون الصورة والنص في عنصر من النوع block مثل div :

<div>
  <img src="examole.com" />
  <p>my text</p>
</div>

كذلك الامر يمكنك تحقيق النتيجة نفسها باستخدام CSS، وسيتغير تعقيد الحل بحسب الشكل النهائي الذي تحاول الوصول إليه.

Hessen Nasser · 28 يوليو 2023

بتاريخ 1 ساعة قال Amal Suhail:

عندي مشككله في ترتيب الصور للجانب الاخر مثل صوره الاولى مرتبه مع الكلام

لحل هذه المشكلة، يمكنك استخدام خاصية Flexbox لتنظيم عناصر العنصر الأب "post" بطريقة أفضل.

يمكنك القيام بذلك باستخدام خاصية "align-items" لتوجيه العناصر عموديًا إلى المنتصف واستخدام "justify-content" لتحديد كيفية توزيع العناصر أفقيًا هناك مساحة فارغة بين الصوره وبين النص .

.post {
	display: flex; /* لتفعيل خاصية Flexbox */
  	align-items: center; //تحديد كيفية توزيع العناصر عموديًا 
  	justify-content: space-between; // تحديد كيفية توزيع العناصر أفقيًا 
}

وبعد ذلك يمكنك تخصيص العناصر الداخليه علي حسب رغتبك في طريقة ظهورها.

Amal Suhail · 28 يوليو 2023

بتاريخ 2 ساعة قال عمر قره محمد:
هل يمكنك مشاركة ملفات المشروع بشكل نصي بحيث يمكنني تجربتها وتحديد مكان الخطأ بسهولة،

يمكنك مشاركة ملفات المشروع عبر ضغطها كما يظهر في الصورة :

اما بشكل عام فيمكنك جعل الصور بجانب النص عن طريق اضافة الصورة قبل النص + و ان تكون الصورة والنص في عنصر من النوع block مثل div :
<div>
  <img src="examole.com" />
  <p>my text</p>
</div>
كذلك الامر يمكنك تحقيق النتيجة نفسها باستخدام CSS، وسيتغير تعقيد الحل بحسب الشكل النهائي الذي تحاول الوصول إليه.

مو طالع عندي الارشيف

Mustafa Suleiman · 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 من أجل عرض الحاويات أسفل بعضها، فبدونه ستظهر بجانب بعضها وليس أسفل بعضها.

Amal Suhail · 29 يوليو 2023

بتاريخ 19 ساعة قال عمر قره محمد:
هل يمكنك مشاركة ملفات المشروع بشكل نصي بحيث يمكنني تجربتها وتحديد مكان الخطأ بسهولة،

يمكنك مشاركة ملفات المشروع عبر ضغطها كما يظهر في الصورة :

اما بشكل عام فيمكنك جعل الصور بجانب النص عن طريق اضافة الصورة قبل النص + و ان تكون الصورة والنص في عنصر من النوع block مثل div :
<div>
  <img src="examole.com" />
  <p>my text</p>
</div>
كذلك الامر يمكنك تحقيق النتيجة نفسها باستخدام CSS، وسيتغير تعقيد الحل بحسب الشكل النهائي الذي تحاول الوصول إليه.

amal.rar

عبدالباسط ابراهيم · 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%;
}

محمد Fahmy · 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; لإضافة مسافة بين النص والصورة، لتصبح النتيجة هكذا :

الصور راحو بنص الصفحه كيف انظمهم بنفس ترتيب الصوره الاولى

السؤال

Amal Suhail

7 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Hessen Nasser

Amal Suhail

Mustafa Suleiman

Amal Suhail

عبدالباسط ابراهيم

محمد Fahmy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية