第二部分和右图像这两个 div 元素是块级元素。
如果您想保持相同的 HTML 结构而不添加整体包含块,将它们并排的一种方法是使第二部分浮动。
.second-part {
display: flex;
float: left;
align-items: left;
margin-left: 200px;
flex-direction: column;
max-width: 40%;
background-color: pink;
}
<div class="second-part">
<h2>This website is awesome</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam, aut natus? Voluptate vel delectus ipsum unde maxime facere aliquid reiciendis quia est enim ducimus magni deleniti repudiandae eveniet, cumque quis.</p>
<div>
<button class="btn">Sign up</button>
</div>
</div>
<div class="right-image">
<img src="https://images.pexels.com/photos/6194848/pexels-photo-6194848.jpeg?auto=compress&cs=tinysrgb&w=400" alt="brittany spaniel in forest looking at the sky">
</div>