[英]changing image position using css
我想把這個圖片的position改到內容的右邊 你知道怎么做嗎? 而且我也不明白為什么文章外面的圖片不應該在里面? 謝謝 我可以這樣做嗎?
我寫了這段代碼:
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>
您需要將.container-A
分配為display: flex
with justify-content: space-between
。 您實際上也不需要div
來包含漢堡圖像,但我包含它是為了使 DOM 盡可能類似於您的原始問題。
我將 mdn web 文檔鏈接到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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.