证明内容：空格之间不起作用

Question

只需创建一个在悬臂处有两个底部的模态寡妇（下载并关闭）即可使用justify-content:space-between。这是由于项目不是按钮吗？稍后使它们可单击。

模式窗口最终将在红色区域包含一个图像轮播，在绿色区域包含普通文本。

感谢您的帮助。

这是我当前结果的照片：

// Modal Pop-up cotainer
.bg-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 700px;
  height: 800px;
  background-color: blue;
}

.autoFP-image-carousel {
  position: relative;
  background-color: red;
  width: 100%;
  height: 65%;
  border-bottom: 2px solid black;
}

.autoFP-content {
  position: relative;
  background-color: green;
  width: 100%;
  height: 40%;
}

.visit-close-bttn {
  background-color: blue;
  position: absolute;
  bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

<div class="bg-modal">
  <div class="modal-container">
    <div class="autoFP-image-carousel">

    </div>
    <div class="autoFP-content">
      <h2>Flight Plan Automation</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="visit-close-bttn">
        <div>check</div>
        <div class="close">+</div>
      </div>
      <!-- Exit btn -->

    </div>
  </div>
</div>

但不起作用？

Answer 1

意识到我没有将div的宽度设置为其父容器。