底部的HTML图像要顶部

时间：2018-10-04 12:31:47

标签： javascript html css

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>filip.dvorak13@gmail.com</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>

预先感谢您的每一个回答。预先感谢您的每一个答案。预先感谢您的每一个答案。预先感谢您的每一个答案。预先感谢您的每一个答案。预先感谢您的每一个回答。预先感谢您的每一个回答。

2 个答案:

答案 0 :(得分：0)

这可能是一种解决方案。将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>filip.dvorak13@gmail.com</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>

答案 1 :(得分：-1)

您可以制作一张具有一行和两个列的表格，它将两张卡片很好地定位在y轴上的同一位置。

相关问题
最新问题