尝试获取页面上弹性容器旁边的图像

问题描述 投票:0回答:1
html css
1个回答
0
投票

第二部分和右图像这两个 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>

© www.soinside.com 2019 - 2024. All rights reserved.