CSS 在左侧展开

Question

我有三张牌。它们分为两部分：正面和背面。如果用户想要切换它，他必须单击卡片，背面就会旋转。目前它工作正常。

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

事实上，正如你从这个例子中看到的，卡片的背面只向左扩展。为什么？我该如何解决？

     <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);
}