यह इस तरह दिखता है

मैं चाहता हूं कि यह इसे पहले कार्ड के बगल में शीर्ष पर ले जाए।

<!-- 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>

प्रत्येक उत्तर के लिए अग्रिम धन्यवाद। प्रत्येक उत्तर के लिए अग्रिम धन्यवाद। प्रत्येक उत्तर के लिए अग्रिम धन्यवाद। प्रत्येक उत्तर के लिए अग्रिम धन्यवाद। प्रत्येक उत्तर के लिए अग्रिम धन्यवाद। प्रत्येक उत्तर के लिए अग्रिम धन्यवाद। प्रत्येक उत्तर के लिए अग्रिम धन्यवाद।

-1
Filip Dvořák 4 अक्टूबर 2018, 15:31

2 जवाब

सबसे बढ़िया उत्तर

यह एक संभावित समाधान हो सकता है। पेश किए गए <section> के लिए flexbox का उपयोग करना तत्व और तत्काल बच्चों के लिए भी।

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>
0
Gerard 4 अक्टूबर 2018, 12:45

आप एक पंक्ति और दो कोल के साथ एक तालिका बना सकते हैं और यह आपके दोनों कार्डों को y-अक्ष पर एक ही स्थान पर अच्छी तरह से स्थापित करेगा।

-1
Damian-Teodor Beles 4 अक्टूबर 2018, 12:34