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

نورة بنات · 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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية