Flex容器移出页面

debugcn 发表于 Dev

马努纳

我的flex容器存在问题，基本上只是离开页面，像这样：

我尝试将显示设置为表格并使用<td>元素将东西放进去，但是它不在框架之内。我希望它是一个将包含first<div>和<header>s的flex容器。

HTML：

<div class="presen">

        <div class="tisane"> <!--overlap d'images-->
            <img id="img1" src="images/herbal-tea-cup-png-images-35.png" alt="Tasse d'infusion de millepertuis" />
            <img id="img2" src="images/noircontourthe.png" alt="" />
        </div> 

        <header>

        </header>

    </div>

相关元素的CSS：

      .tisane {
      display: inline-flex;

  }

  .tisane img#img1 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 300px;
      height: 220px;
      position: absolute;
      top: 300px;
      left: 140px;
      z-index: 2;
  }

  .tisane img#img2 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 330px;
      height: 230px;
      position: absolute;
      top: 298px;
      left: 130px;
      z-index: 1;
  }

  header h1 {
      text-align: center;
  }

  .presen {
      display: flex;
      flex-direction: column;
      top: 298px;
      padding: 0;
      
  }

谢谢。

vmank

您需要设置您body和presen班级的高度。

.tisane {
  display: inline-flex;
}

.tisane img#img1 {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 220px;
  position: absolute;
  top: 300px;
  left: 140px;
  z-index: 2;
}

.tisane img#img2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 330px;
  height: 230px;
  position: absolute;
  top: 600px;
  left: 130px;
  z-index: 1;
}

header h1 {
  text-align: center;
}

.presen {
  display: flex;
  flex-direction: column;
  top: 298px;
  padding: 0;
  height: 100%; //The height of a flexbox can be also set to a percentage
}

body {
  height: 100vh;
}

<div class="presen">

    <div class="tisane"> <!--overlap d'images-->
        <img id="img1" src="https://via.placeholder.com/250" alt="Tasse d'infusion de millepertuis" />
        <img id="img2" src="https://via.placeholder.com/250" alt="" />
    </div> 

    <header>

    </header>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。