Question

所以我正在制作一个记忆游戏。我无法弄清楚为什么当我删除一个显示为none的类时，它会移动父元素div。如果我尝试通过相同的单击函数来对抗它，添加一个将其向上移动125px的类，它仍会留下一个空间。它正从父div中的span中删除一个类。据我所知，位置设置为绝对不是一个选项，因为这适用于每个div。欢迎提出任何进一步的建议。

JSFiddle：https://jsfiddle.net/o0xmcapx/9/

$('.card').click(function(){
  $(this).find("span").toggleClass( "cardText" );
});

Answer 1

由于display:inline-block您的card垂直对齐基线....

...所以请vertical-align:top使用card类

＆＃13;

$(document).ready(function() {
  //console.log('lol');
  var items = [
    "PSotato",
    "Tomato",
    "Strawberry",
    "Pencil",
    "Blueberry",
    "Raspberry",
    "Lettuce",
    "Steak"
  ];
  items = shuffle(items)
  //console.log(items);

  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    while (currentIndex !== 0) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }
  for (i = 0; i < items.length; i++) {
    $('<div class="card"/>').html('<span class="cardText">' + items[i] + '</span>').appendTo('.board');
  };

  items = shuffle(items);

  for (i = 0; i < items.length; i++) {
    $('<div class="card"/>').html('<span class="cardText">' + items[i] + '</span>').appendTo('.board');
  };
  $('.card').click(function() {
    $(this).find("span").toggleClass("cardText");
  });
});

＆＃13;

.board {
  height: 630px;
  width: 630px;
  background-color: #DAD6D6;
  border-radius: 5px;
  left: 50%;
  margin-left: -315px;
  position: relative;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.row {
  width: 100%;
  height: 157.5px;
}

.card {
  width: 125px;
  height: 125px;
  display: inline-block;
  margin: 14.5px;
  border-radius: 5px;
  background-color: #B6455F;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-align: center;
  vertical-align: top;
}

.cardText {
  display: none;
}

.altCardText {
  position: relative;
  top: -125px;
}

.notHidden {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="board"></div>

＆＃13;

<强> Updated Fiddle

Answer 2

我的猜测是，这与此有关：https://www.w3.org/TR/CSS2/box.html#collapsing-margins。奇怪的是，代码中的跨度没有边距或填充。

无论如何，这里有一些选择：

将.cardText改为visibility: hidden而不是display:none。
将overflow: auto添加到.card
将{flex}添加到.board（如果您这样做，可以删除display: inline-block上的.card）：

＆＃13;

.board {
  ...
  display: flex;
  flex-wrap: wrap;
}

＆＃13;

Div占用不在其中的空间

2 个答案: