html - CSS 在左侧展开

Question

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

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

其实从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);
}