كيف اجعل الصورة مقابل النص بالضبط

نورة بنات · 24 سبتمبر 2023

هذا هو الشكل الذي اريد تعديله بلغة html and css

وهذه الاكواد

Mustafa Suleiman · 24 سبتمبر 2023

أرجو إضافة الكود من خلال علامة <> عند كتابة السؤال من أجل مساعدتك بشكل أفضل.

وكمثال على ما تريديه تستطيعي استخدام flexbox كالتالي:

كود HTML مع CSS

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            align-items: center;
            /* لمحاذاة العناصر عمودياً */
        }
        .container img {
            width: 100px;
            /* تعديل حجم الصورة حسب الحاجة */
            
            height: auto;
            /* للحفاظ على تناسب الصورة */
            
            margin-right: 10px;
            /* تعديل المسافة بين الصورة والنص */
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="https://placehold.co/600x400" alt="صورة">
        <p>نص هنا</p>
    </div>
</body>

</html>

https://academy.hsoub.com/programming/css/أمثلة-نموذجية-لاستخدام-flexbox-في-css3-r471/

اسماء محمد10 · 25 سبتمبر 2023

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

والحل هو جعل الصورة والقائمة داخل div وعمل محازاه للعناصر

مثال :-

<html>
<head>
  <title>العنوان</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <ul>
      <li>العنصر الأول</li>
      <li>العنصر الثاني</li>
      <li>العنصر الثالث</li>
    </ul>

    <img src="image.png" alt="صورة">
  </div>
</body>
</html>

css:-

.container {
  display: flex;
  
  justify-content: space-between;
}

img {
  width: 100px;
}

الخاصية justify-content: space-between

هذه تعني ان العناصر سيتم توزيعها بالتساوي على طول المحور الرئيسي(الافقي)، مع ترك مسافة متساوية بينهما.

محمد سعد شحرور · 5 ديسمبر 2023

يمكنك استخدام التنسيق block و float للتحكم بمحاذاة الابناء، ولكن هذه ليست طريقة محبذة ابدا.
الأفضل استخدام flex:

.container {
	display:flex;
  	justify-content: space-between; /* اضافة مسافة بين العنصرين */
	align-items: center /*تنسيق العناصر في الوسط عموديا */
}

او grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* عمودين بنفس العرض*/
  align-items: center; /* تنسيق العناصر في الوسط عموديا */
}

كيف اجعل الصورة مقابل النص بالضبط

السؤال

نورة بنات

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

اسماء محمد10

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد سعد شحرور

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية