Justify-content:空格-间隔不起作用

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的宽度设置为它的父容器。