اذهب إلى المحتوى
  • 0

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

Amal Suhail

السؤال

Recommended Posts

  • 0

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

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

974322694_.thumb.png.ff8dc6c9fd315c9e2179c12f5db2e87a.png

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعة قال عمر قره محمد:

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

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

974322694_.thumb.png.ff8dc6c9fd315c9e2179c12f5db2e87a.png

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 16 ساعة قال Amal Suhail:

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

عليك بتحميل برنامج WinRAR فهو برنامج أساسي لضغط وفك ضغط الملفات والمجلدات، وستجدي  هنا رابط التحميل للنسخة العربية لإصدار ويندوز 32 و 64:

  • 64 لغة عربية

https://www.win-rar.com/fileadmin/winrar-versions/winrar-x64-622ar.exe

وإليك روابط اللغة الإنجليزية:

64 لغة إنجليزية:

32 لغة إنجليزية:

وبعد تثبيته تستطيعي ضغط المجلد كما أشار إليك عمر.

وبالنسبة للتصميم الذي تريدينه، فمن الأفضل استخدام Flexbox من أجل تنفيذه، كالتالي:

2023-07-29_12-30-43.thumb.png.9b5c6de55386f06c260a424a95c22318.png

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 19 ساعة قال عمر قره محمد:

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

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

974322694_.thumb.png.ff8dc6c9fd315c9e2179c12f5db2e87a.png

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

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

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

 

amal.rar

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال Amal Suhail:

يفضل استخدام 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%;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

Screenshot2023-08-02145323.thumb.png.5855eeb6933e391c901a9ff1d268e5df.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...