flexbox 图像在右侧丢失了它的位置答案

【问题标题】：flexbox image is losing its position in right sideflexbox 图像在右侧丢失了它的位置
【发布时间】：2021-05-15 04:31:22
【问题描述】：

我正在尝试构建简单的登陆看 figma。我面临的问题是flexbox里面的照片。在这一行中，我有图像-> 描述-> 图像。我在单行线中做了这个。骑行侧的最后一张图像应该占屏幕的 2/3，我希望它在段落之后保持不变，这就是结果。如果我把图像放大，它会跳到底部。使用 flex 没有帮助。问题行从 css 和 html 中的“Div class="Main-content" 开始。我需要您的建议。提前致谢

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin: auto;
  align-items: center;
}

.logo {
  justify-content: flex-start;
  padding: 25px 15px 0px 0px;
}

.site-desc {
  width: 300px;
  justify-content: flex-end;
  padding: 30px 15px 0px 10px;
  font-size: 12px;
}

.contact-info {
  justify-content: flex-end;
  text-align: center;
  flex: 1;
  padding: 25px 0px 0px 0px;
}

.contact-info img {
  padding: 0px 5px 0px 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: auto;
}

.introduction {
  font-weight: 700;
  font-size: 30px;
  line-height: 45px;
  align-self: flex-start;
  padding: 30px 0px 0px 0px;
  width: 100%;
}

span {
  color: orangered;
}

.kitchen-types {
  padding: 30px 0px 0px 0px;
  font-size: 33px;
  align-self: flex-start;
  font-weight: 300;
}

.main-content {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin: auto;
  padding-top: 5rem;
  padding-left: 2.5rem;
  position: relative;
  height: 70vh;
  background: tomato;
  justify-content: flex-start;
  align-items: flex-start;
}

.left-side {
  position: relative;
}

.art-board {
  position: absolute;
  right: 100px;
  bottom: 185px;
}

.main-content-text {
  position: relative;
  font-size: 17px;
  padding: 15px 20px 0px 28px;
  line-height: 20px;
}

.arrow {
  position: absolute;
  bottom: 220px;
  right: 30rem;
}

.left-side-text {
  position: relative;
  padding-left: 15px;
}

.short-desc-2 {
  padding-top: 10px;
}

.yellow-checked {
  position: absolute;
}

.yellow-checked-2 {
  position: absolute;
  top: 30;
}

.yellow-checked-2,
.yellow-checked {
  right: 99%;
}

.main-content-text h4 {
  padding-bottom: 20px;
  width: 52%;
}

.left-side-cover {
  flex: 2;
}

.left-side-cover img {
  height: 30vh;
}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Like Mebel</title>
</head>

<body>
  <header>
    <div class="logo">
      <img src="images/frame.svg" alt="frame">
    </div>
    <div class="site-desc">
      <p>Изготавливаем и устанавливаем кухни в Москве и области с 2004 года</p>
    </div>
    <div class="contact-info">
      <h2>+7 (995) 508-51-17</h2>
      <p><img src="images/online.svg">сейчас работаем</p>
    </div>
  </header>


  <main>
    <section class="container">
      <div class="introduction">

        <h2 class="text-color-type">
          Современные Комфортные Кухни <span><br/>с пожизненной гарантией</span>
        </h2>
        <h2 class="kitchen-types">Тренды дизайна кухни 2020 г.</h2>
      </div>

    </section>


    <div class="main-content">
      <div class="left-side">
        <img src="images/image163.png">
        <img class="art-board" src="images/Artboard21.png" alt="">
      </div>
      <div class="main-content-text">
        <h4>Максимальное использование пространства и простота в уходе</h4>
        <img class="arrow" src="images/Vector.png" alt="vector">
        <div class="left-side-text">
          <img class="yellow-checked" src="images/Group 839.png" alt="group">
          <p class="short-desc">Гладкие, ровные поверхности без ручек</p>
          <img class="yellow-checked-2" src="images/Group 839.png" alt="group">
          <p class="short-desc-2"> «Умные»‎ материалы фасадов —<br/> нет отпечатков и царапин</p>

        </div>

      </div>

      <div class="left-side-cover">

        <img src="images/Group87.png">
      </div>

    </div>

  </main>
</body>

</html>

【问题讨论】：

尝试删除 justify-content: center;来自容器

标签： html css flexbox frontend

【解决方案1】：

抱歉，我还不能发表评论，但请尝试设置 width:auto;或者您为 img 设置的任何高度值。和边距底部：自动；到

<div class="left-side-cover">
 <img src="images/Group87.png">
</div>

【讨论】：