Question

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

任何帮助将不胜感激！

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

这似乎是因为您有嵌套块而发生。也就是说，每个代码块（.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>

Squarespace代码块对齐问题

1 个答案: