防止 div moving/jumping 向下并使图像高度相同

Question

我在跳转 div 和 ul 时遇到问题。我有一些 tabs/buttons，当我点击它更改标签时，它会出现一行，中间有大图像，下面有一个灯箱图像，但在切换标签时，图像高度会改变并向下移动图像缩略图。为什么会这样？保证金崩溃可能吗？我 post 编码以获得更好的解释。谢谢

var first = document.getElementById("home");
var second = document.getElementById("profile");
var third = document.getElementById("messages");
var fourth = document.getElementById("settings");
var fifth = document.getElementById("fifth");
var bar = document.getElementById("ngprogress-bar");


$("#home").show();
$("#profile").hide();
$("#messages").hide();
$("#settings").hide();
$("#fifth").hide();


$("li").click(function() {
  if ($(this).hasClass('first')) {
    $('.progress-bar').css('width', '120', '%');
    $(this).nextAll().removeClass('active');
    //$('.percent').html("0% Complete"); 
    $('#home').show();
    $('#profile').hide();
    $("#messages").hide();
    $("#settings").hide();
    $("#fifth").hide();
  } else if ($(this).hasClass('second')) {
    $(this).nextAll().removeClass('active');
    $(this).prevAll().addClass('active');
    $(this).addClass('active');
    $('.progress-bar').css('width', '360', '%');
    $("#profile").show();
    $("#messages").hide();
    $("#settings").hide();
    $("#fifth").hide();
    $("#home").hide();
  } else if ($(this).hasClass('third')) {
    $(this).nextAll().removeClass('active');
    $(this).prevAll().addClass('active');
    $(this).addClass('active');
    $('.progress-bar').css('width', '590', '%');
    $('#home').hide();
    $('#profile').hide();
    $("#messages").show();
    $("#settings").hide();
    $("#fifth").hide();
  } else if ($(this).hasClass('fourth')) {
    $(this).nextAll().removeClass('active');
    $(this).prevAll().addClass('active');
    $(this).addClass('active');
    $('.progress-bar').css('width', '1000', '%');
    $('#home').hide();
    $('#profile').hide();
    $("#messages").hide();
    $("#settings").show();
    $("#fifth").hide();
  } else if ($(this).hasClass('fifth')) {
    $(this).nextAll().removeClass('active');
    $(this).prevAll().addClass('active');
    $(this).addClass('active');
    $('.progress-bar').css('width', '1800', '%');
    $("#first").hide();
    $("#second").hide();
    $("#third").hide;
    $("#fourth").hide();
    $("#fifth").show();
  }
});


$("li").click(function() {
  if ($(this).hasClass('first')) {
    $('.icon1').addClass('icon-checked');
    $('.icon2').removeClass('icon-checked');
    $('.icon3').removeClass('icon-checked');
    $('.icon4').removeClass('icon-checked');
    $('.icon5').removeClass('icon-checked');
  } else if ($(this).hasClass('second')) {
    $('.icon1').addClass('icon-checked');
    $('.icon2').addClass('icon-checked');
    $('.icon3').removeClass('icon-checked');
    $('.icon4').removeClass('icon-checked');
    $('.icon5').removeClass('icon-checked');
  } else if ($(this).hasClass('third')) {
    $('.icon1').addClass('icon-checked');
    $('.icon2').addClass('icon-checked');
    $('.icon3').addClass('icon-checked');
    $('.icon4').removeClass('icon-checked');
    $('.icon5').removeClass('icon-checked');
  } else if ($(this).hasClass('fourth')) {
    $('.icon1').addClass('icon-checked');
    $('.icon2').addClass('icon-checked');
    $('.icon3').addClass('icon-checked');
    $('.icon4').addClass('icon-checked');
    $('.icon5').removeClass('icon-checked');
  } else if ($(this).hasClass('fifth')) {
    $('.icon1').addClass('icon-checked');
    $('.icon2').addClass('icon-checked');
    $('.icon3').addClass('icon-checked');
    $('.icon4').addClass('icon-checked');
    $('.icon5').addClass('icon-checked');
  }
});


function myFunction(x) {
  if (x.matches) { // If media query matches
    $("li").click(function() {
        if ($(this).hasClass('first')) {
          var change = document.querySelector('progress-bar', 'progress-bar-reduced');
          $('.progress-bar').css('width', '200', '%');
        }
      }),
      document.body.style.backgroundColor = "yellow";

  } else {
    $("li").click(function() {
        if ($(this).hasClass('first')) {
          var change = document.querySelector('progress-bar');
          $('.progress-bar').css('width', '150', '%');
        }
      }),
      document.body.style.backgroundColor = "pink";

  }
}

var x = window.matchMedia("(max-width:2000px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes



/*slideshow opened

JavaScript Explained

First, set the slideIndex to 1. (First picture)

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs().

The plusDivs() function subtracts one or  adds one to the slideIndex.

The showDiv() function hides (display="none") all elements with the class name "mySlides", and displays (display="block") the element with the given slideIndex.

If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero.

If the slideIndex is less than 1 it is set to number of elements (x.length).

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}*/

var slideIndex = [1, 1];
var slideId = ["mySlides", "mySlides1"]
showDivs(1, 0);
showDivs(1, 1);

function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {
    slideIndex[no] = 1
  }
  if (n < 1) {
    slideIndex[no] = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no] - 1].style.display = "block";
}

/***processo slide change mobile version*

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlidesmobile");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
        **/



/****processo gallery desktop tablet********/

$("a").click(function() {
  if ($(this).hasClass('foto1')) {
    $("#ny").hide();
    $("#element2").show();
    $("#element3").hide();
    $("#element4").hide();
  } else if ($(this).hasClass('dog')) {
    $("#ny").show();
    $("#element2").hide();
    $("#element3").hide();
    $("#element4").hide();
  } else if ($(this).hasClass('foto2')) {
    $("#ny").hide();
    $("#element2").hide();
    $("#element3").show();
    $("#element4").hide();
  } else if ($(this).hasClass('foto3')) {
    $("#ny").hide();
    $("#element2").hide();
    $("#element3").hide();
    $("#element4").show();
  }
});


/************processo gallery mobile version*/


$("a").click(function() {
  if ($(this).hasClass('parte1')) {
    $("#cascata").hide();
    $("#foliage").show();
    $("#arch").hide();
    $("#pinscher").hide();
  } else if ($(this).hasClass('cascata')) {
    $("#cascata").show();
    $("#foliage").hide();
    $("#arch").hide();
    $("#pinscher").hide();
  } else if ($(this).hasClass('arch')) {
    $("#cascata").hide();
    $("#foliage").hide();
    $("#arch").show();
    $("#pinscher").hide();
  } else if ($(this).hasClass('pinscher')) {
    $("#cascata").hide();
    $("#foliage").hide();
    $("#arch").hide();
    $("#pinscher").show();
  }
});

li {
  float: left;
  border: 1px red solid;
  width: 100%;
}

.lista {
  position: absolute;
  z-index: 10;
}

.progress {
  position: absolute;
  z-index: 1;
  /* width:60%;*/
}

.cont {
  display: flex;
  flex-direction: column;
  /* justify-content: center;*/
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

.progress-bar {
  width: 0%;
}

.progress-bar-reduced {
  width: 100%;
}


/*.first{left:7%;}*/


/*.testi{
top:60%!important;
  position:absolute;
}*/

.active {
  background-color: orangered !important;
}

.icon2,
.icon3,
.icon4,
.icon5 {
  filter: grayscale(100%);
  /*background-image:url(https://www.flaticon.com/premium-icon/icons/svg/3635/3635617.svg);*/
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0;
}

.icon-checked {
  filter: hue-rotate(0);
}

#ngprogress-bar {
  width: 15%;
}

a.lightbox img {
  height: 100%;
  border: 3px solid white;
  margin: 94px 20px 20px 20px;
  /*box-shadow: 0px 0px 8px rgba(0,0,0,.3);*/
}


/* Styles the lightbox, removes it from sight and adds the fade-in transition*/

.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0, 0, 0, .7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
  border: 1px solid red;
  left: 0;
  z-index: 100;
}


/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning*/

.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid orange;
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  /*box-shadow: 0px 0px 8px rgba(0,0,0,.3);*/
}


/* Styles the close link, adds the slide down transition*/

a.lightbox-close {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}


/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}


/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
  opacity: 1;
  top: 0%;
  bottom: 0;
}

.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
  top: 0px;
}

.w3-display-left {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
}

.w3-display-right {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%, -50%);
}

.card-header .arrow {
  transition: transform 0.3s ease-in-out;
  margin-right: 5%;
}

.card-header .collapsed .arrow {
  transform: rotate(-90deg);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">


<div class="container mx-auto my-auto bg-success py-5 d-none d-sm-none d-md-block d-lg-block">

  <div class="cont d-flex my-auto mx-auto w-100 bg-dark">
    <div class="row d-flex justify-content-center w-100 col-12 align-content-center bg-danger my-1" style="position: relative;">

      <div class="progress col-12" style="width: 90%;">
        <div id="ngprogress-bar" class="progress-bar bg-sucess" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <ul class="w-auto d-flex justify-content-between list-unstyled lista list-group  list-group-horizontal-lg list-group-horizontal-md list-group-horizontal-sm">
 <li class="list-item col-lg-1 col-md-1 first active p-0">
          <a class="list-group-item list-group-item-action p-0"> <img src="https://www.flaticon.com/svg/static/icons/svg/3635/3635562.svg" class="img-fluid icon1"> </a>
        </li>
        <li class="list-item second col-lg-1 col-md-1 p-0">
          <a class="list-group-item list-group-item-action p-0"> <img src="https://www.flaticon.com/premium-icon/icons/svg/3635/3635617.svg" class="img-fluid icon2"> </a>
        </li>
        <li class="list-item third col-lg-1 col-md-1 p-0">
          <a href="#third" class="list-group-item list-group-item-action p-0"> <img src="https://www.flaticon.com/premium-icon/icons/svg/3635/3635666.svg" class="img-fluid icon3"> </a>
        </li>
        <li class="list-item fourth col-lg-1 col-md-1 p-0">
          <a href="#fourth" class="list-group-item list-group-item-action p-0"> <img src="https://www.flaticon.com/premium-icon/icons/svg/3635/3635690.svg" class="img-fluid icon4"></a>
        </li>
        <li class="list-item fifth col-lg-1 col-md-1 p-0">
<a href="#fifth" class="list-group-item list-group-item-action p-0"><img src="https://www.flaticon.com/premium-icon/icons/svg/3635/3635634.svg" class="img-fluid icon5"> </a></li>
 </ul>

    </div>

    <div class="row d-flex flex-column testi bg-info ">

      <div class="tab-pane" id="home" role="tabpanel" aria-labelledby="home-tab">

        <div class="row d-flex flex-row justify-content-center">
          <img src="https://images.unsplash.com/photo-1602776319836-2d50bf70faec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-lg-8 w-100 mh-100">
        </div>



        <div class="row">
          <ul class="list-group list-group-horizontal list-unstyled">
            <li class="col-lg-3 p-0 m-0">
              <a class="lightbox dog" href="#galleria"> <img id="dog" class="img-fluid w-100 m-0" src="http://i.huffpost.com/gen/749263/original.jpg"> </a>
            </li>

            <div class="lightbox-target" id="galleria">
              <img id="ny" src="https://images.unsplash.com/photo-1601922935980-1f7bfa1e8c55?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid mySlides" />
              <img id="element2" class="img-fluid mySlides" src="https://images.unsplash.com/photo-1603879751440-5edc9320e396?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
              <img id="element3" class="img-fluid mySlides" src="https://images.unsplash.com/photo-1601928241200-f60985419d18?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
              <img id="element4" class="img-fluid mySlides" src="https://images.unsplash.com/photo-1602491581671-3b56532be362?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
              <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button>
              <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button>
              <a class="lightbox-close" href="#"></a>
            </div>


            <li class="col-lg-3 p-0 m-0">
              <a href="#galleria" class="foto1"> <img class="img-fluid w-100 m-0 p-0 h-100" src="https://images.unsplash.com/photo-1603879751440-5edc9320e396?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"> </a>
            </li>
            <li class="col-lg-3 p-0 m-0">
              <a href="#galleria" class="foto2"> <img class="img-fluid w-100 m-0 p-0 h-100" src="https://images.unsplash.com/photo-1601928241200-f60985419d18?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"> </a>
            </li>
            <li class="col-lg-3 p-0 m-0">
              <a href="#galleria" class="foto3"> <img class="img-fluid w-100 m-0 p-0 h-100" src="https://images.unsplash.com/photo-1602491581671-3b56532be362?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"> </a>
            </li>
          </ul>
        </div>

      </div>



      <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">


        <div class="row d-flex flex-row justify-content-center">
          <img src="https://images.unsplash.com/photo-1602407069119-e0c6f1602e31?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-lg-8 w-100 mh-100">
        </div>


        <div class="row">
          <ul class="list-group list-group-horizontal list-unstyled col-lg-12">
            <li class="col-lg-3 p-0 m-0">
              <a class="lightbox dog" href="#galleria"> <img id="canenero" class="img-fluid w-100 m-0" src="https://picsum.photos/id/237/200/200"> </a>
            </li>

            <div class="lightbox-target" id="galleria">
              <img id="dog2" src="https://picsum.photos/id/237/200/300" class="img-fluid mySlides3" />
              <img id="element5" class="img-fluid mySlides3" src="https://picsum.photos/id/100/200/300" />
              <img id="element6" class="img-fluid mySlides3" src="https://picsum.photos/id/74/200/300" />
              <img id="element7" class="img-fluid mySlides3" src="https://picsum.photos/id/65/200/300">
              <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button>
              <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button>
              <a class="lightbox-close" href="#"></a>
            </div>

            <li class="col-lg-3 p-0 m-0">
              <a href="#galleria" class="foto1"> <img class="img-fluid w-100 m-0 p-0 h-100" src="https://picsum.photos/id/100/200/200"> </a>
            </li>
            <li class="col-lg-3 p-0 m-0">
              <a href="#galleria" class="foto2"> <img class="img-fluid w-100 m-0 p-0 h-100" src="https://picsum.photos/id/74/200/200"> </a>
            </li>
            <li class="col-lg-3 p-0 m-0">
              <a href="#galleria" class="foto3"> <img class="img-fluid w-100 m-0 p-0 h-100" src="https://picsum.photos/id/65/200/200"> </a>
            </li>
          </ul>
        </div>

      </div>


      <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">
        <div class="row p-5"> <img src="https://images.unsplash.com/photo-1604092335229-3457166c825c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-3 m-auto"> </div>
        <div class="row p-5"> <img src="https://images.unsplash.com/photo-1602776319836-2d50bf70faec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-3"> <img src="https://images.unsplash.com/photo-1603879751440-5edc9320e396?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
            class="img-fluid col-3"> <img src="https://images.unsplash.com/photo-1601928241200-f60985419d18?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-3"> <img src="https://images.unsplash.com/photo-1602491581671-3b56532be362?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
            class="img-fluid col-3"> </div>
      </div>
      <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
        <div class="row p-5"> <img src="https://images.unsplash.com/photo-1603667337901-aa71d35b2694?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-6 m-auto"> </div>
        <div class="row p-5"> <img src="https://images.unsplash.com/photo-1602776319836-2d50bf70faec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-3"> <img src="https://images.unsplash.com/photo-1603879751440-5edc9320e396?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
            class="img-fluid col-3"> <img src="https://images.unsplash.com/photo-1601928241200-f60985419d18?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid col-3"> <img src="https://images.unsplash.com/photo-1602491581671-3b56532be362?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
            class="img-fluid col-3"> </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>

Answer 1

我解决了。边距设置错误。

防止 div moving/jumping 向下并使图像高度相同

Prevent div moving/jumping down and make images same height

html

css

tabs

image

twitter-bootstrap