底部的HTML图像想要顶部

Question

THIS IS HOW IT LOOKS

我希望它能在第一张卡片旁边显示它。

<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
  <a class="navbar-brand" href="index.html">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
      <li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
      <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
      <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
    </ul>
  </div>
</nav>


<!--Section heading-->
<center>
  <h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->

<div style="padding-left:30%;padding-top:3%">

  <!--Card-->
  <div class="card testimonial-card back" style="width:25%">

    <!--Background color-->
    <div class="card-up teal lighten-2">
    </div>

    <!--Avatar-->
    <div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
    </div>

    <div class="card-body">
      <!--Name-->
      <center>
        <h4 class="card-title mt-1">Filip Dvořák</h4>
      </center>
      <hr>
      <!--Quotation-->
      <center>
        <p>Tester, web designer, programmer and a game developer</p>


      </center>
    </div>

  </div>
  <!--Card-->

</div>

<div style="padding-left:50%">

  <!--Card-->
  <div class="card testimonial-card back" style="width:35%">
    <!--Background color-->
    <div class="card-up teal lighten-2">
    </div>
    <!--Avatar-->
    <div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
    </div>
    <div class="card-body">
      <!--Name-->
      <center>
        <h4 class="card-title mt-1">Filip Dvořák</h4>
      </center>
      <hr>
      <!--Quotation-->
      <p>Tester, web designer, programmer and a game developer</p>
    </div>
  </div>
  <!--Card-->
</div>

<!-- footer-->
<div style="padding-top:17.6%">

  <footer class="page-footer fixed-bottom font-small white pt-4">

    <div class="container">
      <div class="row">
        <div class="col spodek text-center" style="padding-top:25px">
          <h5 class="text-uppercase font-weight-bold">contact</h5>
          <p>[email protected]</p>
        </div>
        <div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
        <div class="col spodek text-center" style="padding-top:25px">
          <h5 class="text-uppercase font-weight-bold">sponsor</h5>
          <p>Construsoft s.r.o.</p>
        </div>
      </div>
    </div>

  </footer>

</div>

提前感谢您的每一个答案。每个答案都要提前感谢。请提前感谢您的每一个答案。请提前感谢您的每一个答案。请提前感谢您的每一个答案。提前感谢您的每一个答案。提前感谢您的每一个答案。

Answer 1

这可能是一种可能的解决方案。使用flexbox引入的<section>元素以及直接的孩子。

section {
  display: flex;
}

section>div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
  <a class="navbar-brand" href="index.html">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
      <li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
      <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
      <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
    </ul>
  </div>
</nav>
<!--Section heading-->
<center>
  <h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<section>
  <div>
    <!--Card-->
    <div class="card testimonial-card back" style="width:25%">
      <!--Background color-->
      <div class="card-up teal lighten-2">
      </div>
      <!--Avatar-->
      <div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
      </div>
      <div class="card-body">
        <!--Name-->
        <center>
          <h4 class="card-title mt-1">Filip Dvořák</h4>
        </center>
        <hr>
        <!--Quotation-->
        <center>
          <p>Tester, web designer, programmer and a game developer</p>
        </center>
      </div>
    </div>
    <!--Card-->
  </div>
  <div>
    <!--Card-->
    <div class="card testimonial-card back" style="width:35%">
      <!--Background color-->
      <div class="card-up teal lighten-2">
      </div>
      <!--Avatar-->
      <div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
      </div>
      <div class="card-body">
        <!--Name-->
        <center>
          <h4 class="card-title mt-1">Filip Dvořák</h4>
        </center>
        <hr>
        <!--Quotation-->
        <p>Tester, web designer, programmer and a game developer</p>
      </div>
    </div>
    <!--Card-->
  </div>
</section>
<!-- footer-->
<div>
  <footer class="page-footer fixed-bottom font-small white pt-4">
    <div class="container">
      <div class="row">
        <div class="col spodek text-center" style="padding-top:25px">
          <h5 class="text-uppercase font-weight-bold">contact</h5>
          <p>[email protected]</p>
        </div>
        <div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
        <div class="col spodek text-center" style="padding-top:25px">
          <h5 class="text-uppercase font-weight-bold">sponsor</h5>
          <p>Construsoft s.r.o.</p>
        </div>
      </div>
    </div>
  </footer>
</div>

Answer 2

你可以用一行和两个colls制作一张桌子，它可以很好地将你的两张牌放在y轴的同一个位置。