Question

我有三张牌。它们分为两部分：正面和背面。如果用户想要切换它，他必须点击卡片并且后面看起来是旋转的。现在它工作正常。

我想补充一点：当背面显示时，我希望它也可以向右和向左扩展。我需要这个，因为我会在后面插入几张桌子，我需要空间。这是中途结束。

事实上，正如您从 THIS EXAMPLE 所看到的那样，卡的背面仅向左扩展。为什么？我该如何解决？

     <div class="cards">
      <div class="riga">
        <div class="r2">
          <div class="r4">
            <div class="card-container manual-flip">
              <div onclick="rotateCard(this)" class="card">
                <div class="front">
                  <div class="cover">
                    <img src="img/rotating_card_thumb2.png" />
                  </div>
                  <div class="user">
                    <img src="img/img1.png" class="img-circle" />
                  </div>
                  <div class="content">
                    <div class="main">
                      <h3 class="name">Text</h3>
                      <p class="profession">Text</p>
                      <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                      <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                    </div>
                    <div class="footer">
                      <button class="btn btn-simple">
                                                Info
                                            </button>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <div class="header">
                    <h5 class="motto">Text</h5>
                  </div>
                  <div class="content">
                    <div class="main">
                      <h4 class="text-center">Info</h4>
                    </div>
                  </div>
                  <div class="footer">
                    <button class="btn btn-simple">
                                            Back  
                                        </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="r4">
            <div class="card-container manual-flip">
              <div onclick="rotateCard(this)" class="card">
                <div class="front">
                  <div class="cover">
                    <img src="img/rotating_card_thumb.png" />
                  </div>
                  <div class="user">
                    <img src="img/img2.png" class="img-circle" />
                  </div>
                  <div class="content">
                    <div class="main">
                      <h3 class="name">Text</h3>
                      <p class="profession">Text</p>
                      <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                      <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                    </div>
                    <div class="footer">
                      <button class="btn btn-simple">
                                               Info
                                            </button>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <div class="header">
                    <h5 class="motto">Text</h5>
                  </div>
                  <div class="content">
                    <div class="main">
                      <h4 class="text-center">Info</h4>
                    </div>
                  </div>
                  <div class="footer">
                    <button class="btn btn-simple">
                                            Back  
                                        </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="r4">
            <div class="card-container manual-flip">
              <div onclick="rotateCard(this)" class="card">
                <div class="front">
                  <div class="cover">
                    <img src="img/rotating_card_thumb2.png" />
                  </div>
                  <div class="user">
                    <img src="img/img3.png" class="img-circle" />
                  </div>
                  <div class="content">
                    <div class="main">
                      <h3 class="name">Text</h3>
                      <p class="profession">Text</p>
                      <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                      <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                    </div>
                    <div class="footer">
                      <button class="btn btn-simple">
                                                Info
                                            </button>
                    </div>
                  </div>
                </div>
                <div class="back">
                  <div class="header">
                    <h5 class="motto">Text</h5>
                  </div>
                  <div class="content">
                    <div class="main">
                      <h4 class="text-center">Info</h4>
                    </div>
                  </div>
                  <div class="footer">
                    <button class="btn btn-simple">
                                            Back  
                                        </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

你的背卡实际上有约束力，要将它与容器的左侧对齐，所以在它旋转时向右对齐。

.front, .back {
    left: 0;
}

你应该调整它以使你的溢出卡居中。您可以使用calc()函数执行此操作。

.back {
    width: 900px;
    left: calc((100% - 900px) / 2);
}

CSS仅在左侧展开

1 个答案: