4 תשובות
!hello yevanim-yoter-tovim
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image and text side by side</title>
<style>
.container {
display: flex;
align-items: center;
}
.container img {
margin-right: 20px; /* רווח בין התמונה לטקסט */
}
</style>
</head>
<body>
<div class="container">
<img src="path-to-your-image.jpg" alt="description of image" width="150">
<p>your text goes here. this is an example of text placed next to an image.</p>
</div>
</body>
</html>
מקווה שזה מובן
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image and text side by side</title>
<style>
.container {
display: flex;
align-items: center;
}
.container img {
margin-right: 20px; /* רווח בין התמונה לטקסט */
}
</style>
</head>
<body>
<div class="container">
<img src="path-to-your-image.jpg" alt="description of image" width="150">
<p>your text goes here. this is an example of text placed next to an image.</p>
</div>
</body>
</html>
מקווה שזה מובן
תשתמש בצאט ציפיטי הוא פשוט יעשה לך
תשתמשי בתגית <div> כדי ליצור מיכל (container) שיחזיק את התמונה והטקסט.
לאחר מכן, בתוך המיכל, תוסיפי את התמונה באמצעות תגית <img>.
ואז ליד התמונה, תוסיפי את הטקסט בתוך תגית <p>.
וכדי לסדר את התמונה והטקסט זה לצד זה, תשתמשי בcss עם התכונה display: flex; על המיכל.
ואם את רוצה לעשות רווח בין התמונה לטקסט, תוסיפי מרווח (margin) לתמונה.
ככה לדוגמה:
ב html
<div class="container">
<img src="path-to-your-image.jpg" alt="description of image">
<p>your text goes here.</p>
</div>
ואז ב css:
.container {
display: flex;
align-items: center;
}
.container img {
margin-right: 20px; /* רווח בין התמונה לטקסט */
}
מקווה שעזרתי :)
לאחר מכן, בתוך המיכל, תוסיפי את התמונה באמצעות תגית <img>.
ואז ליד התמונה, תוסיפי את הטקסט בתוך תגית <p>.
וכדי לסדר את התמונה והטקסט זה לצד זה, תשתמשי בcss עם התכונה display: flex; על המיכל.
ואם את רוצה לעשות רווח בין התמונה לטקסט, תוסיפי מרווח (margin) לתמונה.
ככה לדוגמה:
ב html
<div class="container">
<img src="path-to-your-image.jpg" alt="description of image">
<p>your text goes here.</p>
</div>
ואז ב css:
.container {
display: flex;
align-items: center;
}
.container img {
margin-right: 20px; /* רווח בין התמונה לטקסט */
}
מקווה שעזרתי :)
הסוגריים פה הפוכים משום מה, אז תשימי לב לזה ותצרי מיכל שהטקסט יהיה בתוכו
באותו הנושא: