jquery - Squarespace 代码块对齐问题

Question

我们的网站上有自定义编码的动画翻转卡片。它们的对齐和大小存在问题。仅当页面上有多个卡片时才会出现此问题(它们是使用代码块制作的)。您可以在下面的链接中查看问题。

如有任何帮助，我们将不胜感激!

LINK TO SITE

JSFIDDLE (只有 1 张卡......问题没有出现)

HTML:

<div class="flip-container" ontouchstart="this.classList.toggle('focus');">
  <div class="flipper">
    <div class="front-brian">
    </div>
    <div class="back">
      <div class="centerize">
        <div class="socicon-style">
          <a href="imdb.com">
            <span class="socicon-imdb">
        </span>
          </a>
        </div>
        <div class="back-title">Brian Perry</div>
        <div class="role">CEO</div>
      </div>
    </div>
  </div>

CSS:

.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
    transform: rotateY(180deg);

    background: #bd2d2c;
}







.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;


}




.flip-container:hover .flipper,  
  .flip-container.hover .flipper {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }








.flip-container, .front-brian, .front-tony, .front-blaine, .front-alex, .front-eric, .front-sue, .front-tamara, .front-kenyon, .front-dom, .front-lt, .front-lindsey, .front-chris, .front-ethan, .back {
  width:6000px;
  min-height:100%; 
  max-width:100%;
  max-height: 10000px;
   height:0;
   padding-bottom: 70%;

}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

.front-brian, .front-tony, .front-blaine, .front-alex, .front-eric, .front-sue, .front-tamara, .front-kenyon, .front-dom, .front-lt, .front-lindsey, .front-chris, .front-ethan, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 100;
}







.front-brian{
    background: url(http://static1.squarespace.com/static/573e762945bf219b6da541d1/t/57a5d191e3df28ea3c3f9bfb/1470484886737/Brian+Headshots-29.jpg);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


.back-title {
    color: #fff;
    font-size: 2em;
    position: absolute;
    top: 14%;
    left: 0%;
    right: 0%;
    text-align: center;
}

.role {
    color: #fff;
    font-size: 1.5em;
    position: absolute;
    top: 30%;
    left: 0%;
    right: 0%;
    text-align: center;
}

Answer 1

这似乎是因为您有嵌套的 block 。也就是说，每个代码块 ( .code-block ) 都嵌套在前一个代码块中，因此每个图像都比之前的图像填充得稍微多一些。

见附图。 Nested Squarespace Code Blocks - Dev. Tools Screenshot

我不确定这个问题是如何产生的。您是否复制并粘贴了包含 sqs-block code-block sqs-block-code 元素的代码？看起来你做到了，至少乍一看是这样。

要解决此问题，您需要删除所有包装每个 flip-container div 的特定于 Squarespace 的 div。在代码块中，您应该拥有的是一系列 flip-container div，一个接一个。像这样:

<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div>
<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div>
<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div>
<div class="flip-container" ontouchstart="this.classList.toggle('focus');">etc</div>