Flexbox 布局 - 在彼此的边缘对齐元素

Question

我正在创建一个反应组件，但我不知道如何布置项目。 由于 Audio 组件，它目前看起来像这样：

我希望两个图像彼此垂直对齐，如下所示：

#finish-content {
    width: 100%;
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    text-align: center;
}

.game-finish-flex {
    display: flex;
    flex-direction: column;
}

.game-finish-upper {
    display: flex;
    justify-content: center;
}

.game-finish-image, .game-finish-image-secundar {
    border-radius: 15px;
}

.game-finish-image { 
    margin-top: 1rem;
    width: 300px;
    height: 200px;
}

.game-finish-image-secundar {
    width: 300px;
    height: 150px;
}

.message-finish {
    border: 1px solid black;
    border-radius: 1.5rem;
    width: 50%;
    margin: 1.5rem auto;
    height: 2.5rem;
    width: 300px;
    line-height: 2.5rem;
}

.circle-audio {
    color: #fff;
    border: 1px solid black;
    border-radius: 50%;
}

.fa-stack-custom {
    cursor: pointer;
    margin-left: 1rem;
}

span.audio-gameinfo {
    margin-left: 0rem;
    margin-bottom: 0.5rem;
}

.audio-finish {
    margin-top: 1rem;
}

.game-details-image {
    margin-top: 2rem;
    border-radius: 15px;
    width: 15rem;
    height: 15rem;
}

.game-answers-image {
    border-radius: 15px;
    width: 15rem;
    height: 15rem;
    margin: 0 !important;
    padding: 0 !important;
}

.draggable-game-image {
    border-radius: 15px;
    margin: 0 1rem 1rem 1rem;
}

@media (max-width: 800px)
{
    .game-answers-image {
        width: 12rem;
        height: 12rem;
    }
}

<div id="quiz-container">
    <div class="row">
        <div id="finish-content">
            <div class="game-finish-flex">
                <div class="game-finish-upper">
                    <div class="game-image-wrapper"><img class="game-finish-image" src="/Untitled.png" alt="test"></div>
                    <span class="fa-stack fa-stack-custom audio-finish"><i
                            class="far fa-circle fa-stack-2x circle-audio"></i><i
                            class="fa fa-volume-up fa-stack-1x"></i></span>
                </div>
                <div class="message-finish">test</div>
                <div class="game-image-wrapper"><img class="game-finish-image-secundar" src="/Untitled.png" alt="test">
                </div>
            </div><a href="/quiz/gamefinish"><button class="btn btn-outline-success next-button">Next</button></a>
        </div>
    </div>
</div>

如何在不删除音频组件的情况下将布局更改为第二张图片中的样子？

谢谢。

Answer 1

从您的代码和图片的外观来看。让我来看看我对这个问题的解决方案。摆脱音频组件，因为它会中断您要对齐的框的流动。其次，确保两个图像的宽度相同，这可以作为父容器的百分比来完成。现在，我假设您仍然希望在您的网站上使用该音频组件，因此可以采用以下几种解决方案：

1. 将此音频框放置在上图的 div 内。使用负边距/定位以确保它位于此框的右侧。这可以使用 position:absolute, right:0, margin-right: -10%, transform: translateX(10%) 来实现。

2. 使父容器宽度：50%，边距：0 自动。所以它是中心。现在对齐项目：flex-start。这将使第一个项目对齐，因为 flexbox 不会试图通过在它们周围分布它们各自的宽度和空间来使它们居中。

Answer 2

音频图标可以在任何地方吗？如果是这样，试试这个 sn-p。

#finish-content {
      
      border: 1px solid black;
      border-radius: 25px;
      margin-left: 1.5rem;
      text-align: center;
    }

    .game-finish-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .game-finish-upper {
      display: flex;
      justify-content: center;
    }

    .game-finish-image,
    .game-finish-image-secundar {
      border-radius: 15px;
    }

    .game-finish-image {
      margin-top: 1rem;
      width: 300px;
      height: 200px;
    }

    .game-finish-image-secundar {
      width: 300px;
      height: 150px;
    }

    .message-finish {
      border: 1px solid black;
      border-radius: 1.5rem;
      width: 50%;
      margin: 1.5rem auto;
      height: 2.5rem;
      width: 300px;
      line-height: 2.5rem;
    }

    .circle-audio {
      color: #fff;
      border: 1px solid black;
      border-radius: 50%;
    }

    .fa-stack-custom {
      cursor: pointer;
      margin-left: 1rem;
    }

    span.audio-gameinfo {
      margin-left: 0rem;
      margin-bottom: 0.5rem;
    }

    .audio-finish {
      position: relative;
      display: flex;
      top: 60px;
      right: -50px;
      align-content: flex-end;
      justify-content: flex-end;


    }

    .game-details-image {
      margin-top: 2rem;
      border-radius: 15px;
      width: 15rem;
      height: 15rem;
    }

    .game-answers-image {
      border-radius: 15px;
      width: 15rem;
      height: 15rem;
      margin: 0 !important;
      padding: 0 !important;
    }

    .draggable-game-image {
      border-radius: 15px;
      margin: 0 1rem 1rem 1rem;
    }

    @media (max-width: 800px) {
      .game-answers-image {
        width: 12rem;
        height: 12rem;
      }
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


  <title>home</title>

</head>

<body>
  <div id="quiz-container">
    <div class="row">

      <div id="finish-content">
      
     


      
        <div class="game-finish-flex">
          <div class="game-finish-upper">
            <div class="game-image-wrapper">
             <div class="audio-finish">
              <span class="fa-stack fa-stack-custom">
                <i class="far fa-circle fa-stack-2x circle-audio"></i>
                <i class="fa fa-volume-up fa-stack-1x"></i>
              </span>
      </div>
              <img class="game-finish-image" src="https://i.stack.imgur.com/Rkwue.png" alt="test">
            </div>

          </div>
          <div class="message-finish">test</div>
          <div class="game-image-wrapper"><img class="game-finish-image-secundar"
              src="https://i.stack.imgur.com/4QcJ1.png" alt="test">
          </div>
        </div>

        <a href="/quiz/gamefinish"><button class="btn btn-outline-success next-button">Next</button></a>
      </div>
    </div>
  </div>

</body>


</html>