我试图在不影响包装器容器的情况下将图像移到浏览器的右端.
img {
max-width: 100%;
}
.story-container {
border: 1px solid black;
}
.wrapper {
max-width: 1080px;
margin: 0 auto;
width: 90%;
justify-content: center;
border: 1px solid black
}
.story-container .wrapper {
display: flex;
border: 1px solid red;
}
<section class="story-container">
<div class="wrapper">
<div class="story-info">
<div class="text-container">
<h2>Bobby and Bella</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea enim delectus perspiciatis blanditiis vitae, excepturi praesentium vero nulla veniam nihil recusandae placeat architecto accusantium debitis ad, minima, ratione deleniti.
</p>
<button>Read More</button>
</div>
</div>
<div class="story-img">
<img src="https://shots.codepen.io/jennyq/pen/poKvMPP-1280.jpg?version=1667009763" alt="pic of bobby and bella bear" />
</div>
</div>
</section>
output -
这就是我想要做的-文本应该是包装器内的容器.但是我想要在我的浏览器的右端