如何解决翻转卡片内.putmenextTo div重叠，实现横向并排显示

嘿，我懂你遇到的糟心事了——翻转卡片里的.putmenextTo div总叠在一起，试了好几种CSS布局都没搞定对吧？问题的核心其实出在你的CSS选择器范围上，咱们一步步来修复：

问题根源 #

你写的.card div选择器会匹配.card下所有层级的div元素，包括卡片的正面/背面，以及它们内部的子div。而这个选择器里设置了position: absolute，直接导致内部的.putmenextTo div全部脱离文档流，自然会堆叠在一起。

修复方案 #

1. 缩小绝对定位的应用范围 #

把.card div修改为.card > div，这样只会选中.card的直接子元素（也就是.flipcardFront和.flipcardBack），不会影响它们内部的子div：

.card > div { 
    border-radius: 15px; 
    display: block; 
    height: 100%; 
    width: 100%; 
    line-height: 26px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    font-size: 10px; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
}

2. 给内部div设置横向布局 #

推荐用Flexbox实现横向并排，简单还兼容性好。给卡片的正面和背面容器添加display: flex，再给.putmenextTo设置flex属性分配空间：

.flipcardFront, .flipcardBack {
    display: flex;
    justify-content: space-around; /* 让子元素均匀分布 */
    align-items: center; /* 垂直居中 */
}

.putmenextTo {
    flex: 1; /* 让每个子div平分父容器宽度 */
    margin: 0 2px; /* 加一点间距避免太挤 */
}

如果你更习惯用inline-block，也可以这样设置：

.flipcardFront, .flipcardBack {
    white-space: nowrap; /* 防止子元素换行 */
}

.putmenextTo {
    display: inline-block;
    width: 31%; /* 留一点间距，三个div各占约1/3宽度 */
    white-space: normal; /* 恢复文本正常换行 */
}

修改后的完整代码 #

.flipcardHold { 
    margin: 10px; 
    height: 30px; 
    width: 300px; /* 加宽容器，给子div足够显示空间 */
    position: relative; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
}
.card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 50% 50%; 
}
.card > div { 
    border-radius: 15px; 
    display: block; 
    height: 100%; 
    width: 100%; 
    line-height: 26px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    font-size: 10px; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
}
.card .flipcardFront { 
    background: red; 
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.card .flipcardBack { 
    background: blue; 
    -webkit-transform: rotateY( 180deg); 
    -moz-transform: rotateY( 180deg); 
    -o-transform: rotateY( 180deg); 
    transform: rotateY( 180deg); 
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.card.flipped { 
    -webkit-transform: rotateY( 180deg); 
    -moz-transform: rotateY( 180deg); 
    -o-transform: rotateY( 180deg); 
    transform: rotateY( 180deg); 
}
.putmenextTo {
    flex: 1;
    margin: 0 2px;
}

<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"> </script>
<button id="flipbutton">flip the card</button>
<div class="flipcardHold">
  <div class="card">
    <div class="flipcardFront">
      <div id="Frontinnerdiv1" class="putmenextTo">Front First div</div>
      <div id="Frontinnerdiv2" class="putmenextTo">Front Second div</div>
      <div id="Frontinnerdiv3" class="putmenextTo">Front Third div</div>
    </div>
    <div class="flipcardBack">
      <div id="Backinnerdiv1" class="putmenextTo">Back First div</div>
      <div id="Backinnerdiv2" class="putmenextTo">Back Second div</div>
      <div id="Backinnerdiv3" class="putmenextTo">Back Third div</div>
    </div>
  </div>
</div>

<script>
$("#flipbutton").click(function() {
  $('.card').toggleClass('flipped');
});
</script>

我还把.flipcardHold的宽度从100px调到了300px，确保三个子div有足够空间显示内容，你可以根据需求再调整这个数值。

内容的提问来源于stack exchange，提问作者bevan7