Я хотел бы изменить положение этого изображения и поместить его справа от содержимого ты знаешь как? и я тоже не понимаю, почему изображение вне статьи не должно быть внутри? Спасибо 
я могу это сделать?
Я написал этот код:
your text
section {
display : flex;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
margin-top : 20px;
height : 50vh;
width : 60vw;
border-radius : 3px;
box-shadow : -10px -10px 15px rgba(255,255,255, 0.5)
, 10px 10px 15px rgba( 70, 70, 70, 0.12);
}
.art-fle1 ,
.art-fle2 {
height : 90%;
width : 100%;
margin-top : auto;
}
.content-text {
width : 50%;
height : 80%;
padding-left : 15px;
}
.burger {
width : 270px;
float : right;
}
<main>
<section class="first-section">
<article class="art-fle1" class="a1">
<div class="continer A">
<div class="content-text">
<h1>Header 1</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis voluptate vel ab consectetur repudiandae sunt accusantium. Perspiciatis, minima voluptatem!
</p>
</div>
<div class="burger">
<img src="food/burger.jpg" alt="" width="270px">
</div>
</div>
</article>
</section>
</main>
0
25 Ноя 2022 в 21:02
2 ответа
Мой html-код:
<main>
<section class="first-section">
<article class="art-fle1" class="a1">
<div class="continer A">
<div class="content-text">
<h1>Header 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis voluptate vel ab consectetur repudiandae sunt accusantium. Perspiciatis, minima voluptatem!</p>
</div>
<div class="burger">
<img src="food/burger.jpg" alt="" width="270px">
</div>
</div>
</article>
</section>
</main>
0
25 Ноя 2022 в 21:04
Не добавляйте это, используйте функцию обновления в своем вопросе...
–
25 Ноя 2022 в 21:18
Вам нужно назначить .container-A как display: flex с justify-content: space-between. Вам действительно не нужен div, чтобы содержать изображение гамбургера, но я включил его, чтобы сделать DOM максимально похожим на ваш исходный вопрос.
Я связываю веб-документы mdn для justify-content и
align-items также. Надеюсь это поможет!
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
<!DOCTYPE html>
<html>
<head>
<title>Stack Overflow</title>
<style>
section {
display : flex;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
margin-top : 20px;
height : 50vh;
width : 60vw;
border-radius : 3px;
box-shadow : -10px -10px 15px rgba(255,255,255, 0.5)
, 10px 10px 15px rgba( 70, 70, 70, 0.12);
}
.art-fle1 ,
.art-fle2 {
height : 90%;
width : 100%;
margin-top : auto;
}
.content-text {
width : 50%;
height : 80%;
padding-left : 15px;
}
.burger {
width : 270px;
float : right;
}
.container-A {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<main>
<section class="first-section">
<article class="art-fle1" class="a1">
<div class="container-A">
<div class="content-text">
<h1>Header 1</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat corporis voluptate vel ab consectetur repudiandae sunt accusantium. Perspiciatis, minima voluptatem!
</p>
</div>
<div class="burger">
<img src="food/burger.jpeg" alt="" width="270px">
</div>
</div>
</article>
</section>
</main>
</body>
</html>
0
25 Ноя 2022 в 21:54