Jquery 布局中的CSS问题。翻转所有相邻的div而不影响布局

我正在创建一个仪表板，其中图形翻转以显示更多文本细节。 我有3个相邻的图。我确实编写了代码来成功地翻转它。但这只在我的第一个div中发生。当我尝试将相同的逻辑应用于接下来的两个相邻的图时，输出看起来并没有那么好。这破坏了我的整个布局。A.我怀疑display:flex的母div是罪魁祸首，因为我不太熟悉CSS3

我只想在第一个图中发生同样的事情，在第二个和第三个图中发生同样的事情

下面是正确翻转的HTML代码 HTML

---

在尝试小提琴和应用下面的html结构时：

<div class="flipcard h">
    <div class="front">
     <div id="chart1"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>

lorem epsum asd dfse fsdfseesgdgr

其他图表：

<div class="flipcard h">
    <div class="front">
     <div id="chart2"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>

lorem epsum asd dfse fsdfseesgdgr

在翻转方面，一切都和第一张图表一样，我看到的唯一问题是图表的宽度减小了

这是由CSS中的

#chart2

和

#chart3

宽度属性造成的，这两个属性的

宽度
为
31.33%
，而
#chart1
宽度
为
100%

将
#chart2
和
#chart3
宽度设置为100%可以解决该问题

在尝试小提琴和应用下面的html结构时：

<div class="flipcard h">
    <div class="front">
     <div id="chart1"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>


lorem epsum asd dfse fsdfseesgdgr


其他图表：

<div class="flipcard h">
    <div class="front">
     <div id="chart2"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>


lorem epsum asd dfse fsdfseesgdgr


在翻转方面，一切都和第一张图表一样，我看到的唯一问题是图表的宽度减小了


这是由CSS中的
#chart2
和
#chart3
宽度属性造成的，这两个属性的
宽度
为
31.33%
，而
#chart1
宽度
为
100%

将
#chart2
和
#chart3
宽度设置为100%可以解决该问题

我已经创建了一个更新的JSFIDLE。元素现在翻转，但背景需要定位得更好一些

宽度已调整：

#chart2{
  height:auto;
  width:100%;
  background-color:#f8f8ff;
  display:block;
  margin-left:2%;
  padding-bottom:2%;
}

#chart3{
  height:auto;
  width:100%;
  background-color:#f8f8ff;
  display:block;
  margin-left:2%;
  padding-bottom:2%;
}

我已经创建了一个更新的JSFIDLE。元素现在翻转，但背景需要定位得更好一些

宽度已调整：

#chart2{
  height:auto;
  width:100%;
  background-color:#f8f8ff;
  display:block;
  margin-left:2%;
  padding-bottom:2%;
}

#chart3{
  height:auto;
  width:100%;
  background-color:#f8f8ff;
  display:block;
  margin-left:2%;
  padding-bottom:2%;
}

您的主要问题是，一旦对所有图形进行了
.flipcard
处理，所有图形都是
位置：绝对的
，这意味着这些元素不会产生任何高度。这会导致整个顶部的高度为零

我做了以下修改：


要下载HTML，请执行以下操作：

将图表更改为全部使用flipcart结构（从您的问题中复制）

对于CSS：

将
.GraphBackground
填充更改为
2%
，并
调整内容：之间的间距
，以便将卡均匀地隔开（这与解决特定问题无关）
去除
宽度：31.33%来自
#图表2
和
#图表3
（它们应该具有容器的全宽，即卡片）

从
.flipcard.front
中删除了
位置：绝对
，这是最重要的更改，因为这意味着
.flipcard
现在又有了固有的高度
将
top:0
添加到
.flipcard.back
，因为
.front
不再绝对定位，
.back
的默认位置在
.front
的下方，所以我们必须将其移动到顶部


以下是应用了这些更改的版本：


var chart1=c3.generate({
bindto:“#图表1”，
数据：{
栏目：[
[data1'，30200100400150250]，
[data2'，50，20，10，40，15，25]
]
}
});
var chart2=c3.0({
bindto:“#图表2”，
数据：{
栏目：[
[data1'，30200100400150250]，
[data2'，50，20，10，40，15，25]
]
}
});
var chart3=c3.generate({
bindto:“#图表3”，
数据：{
栏目：[
[data1'，30200100400150250]，
[data2'，50，20，10，40，15，25]
]
}
});
.GraphBackground{
高度：自动；
宽度：100%；
背景色：#e1e5e8；
利润率最高：2%；
填充：2%2%2%2%；
框大小：边框框；
显示器：flex；
证明内容：之间的空间；
}
.图像背景{
高度：自动；
宽度：100%；
背景色：#e1e5e8；
//利润率最高：2%；
填充：0%02%2%；
框大小：边框框；
显示器：flex；
}
.图像背景图像{
宽度：200px；
高度：200px；
保证金：自动；
显示：块；
垫底：2%；
}
#图表1{
高度：自动；
宽度：100%；
背景色：#f8f8ff；
显示：块；
垫底：2%；
}
#图表2{
高度：自动；
背景色：#f8f8ff；
显示：块；
左缘：2%；
垫底：2%；
}
#图表3{
高度：自动；
背景色：#f8f8ff；
显示：块；
左缘：2%；
垫底：2%；
}
#模式分析{
高度：自动；
宽度：31.33%；
背景色：#f8f8ff；
显示：块；
填充：2%0；
}
#购买{
高度：自动；
宽度：31.33%；
背景色：#f8f8ff；
显示：块；
左缘：2%；
填充：2%0；
}
#谭{
高度：自动；
宽度：31.33%；
背景色：#f8f8ff；
显示：块；
左缘：2%；
填充：2%0；
}
.活页卡{
位置：相对位置；
宽度：31.33%；
高度：自动；
透视图：500px；
}
.flipcard.v:hover.front、.flipcard.v.flip.front{
变换：rotateX（180度）；
}
.flipcard.v:hover.back、.flipcard.v.flip.back{
变换：旋转（0度）；
}
.flipcard.背面{
变换：rotateX（-180度）；
}
.flipcard.h:hover.front、.flipcard.h.flipcard.front{
变换：旋转（180度）；
}
.flipcard.h:hover.back..flipcard.h.flipcard.back{
转换：
.flipcard .front
{
  //position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  background-color: #f8f8ff;
  /*padding: 10px;*/
  backface-visibility: hidden;
}
.flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  background-color: #424242;
  /*padding: 10px;*/
  backface-visibility: hidden;
  display: table; 
  top: 0;
  left: 0;
}

<div class="main-content">
<div class="GraphBackground">

<div class="flipcard h">
    <div class="front">
     <div id="chart1"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>
<div class="flipcard h">
    <div class="front">
     <div id="chart2"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>
<div class="flipcard h">
    <div class="front">
     <div id="chart3"></div>
    </div>
    <div class="back">
      <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>

<div class="clear-fix"> </div>
</div>

</div>

<div class="imageBackground">
<div id="patternAnalysis"><img src="https://raw.githubusercontent.com/vadymmarkov/Fakery/master/Images/logo.png"></div>
<div id="purchase"><img src="https://raw.githubusercontent.com/vadymmarkov/Fakery/master/Images/logo.png"></div>
<div id="tam">
<img src="https://raw.githubusercontent.com/vadymmarkov/Fakery/master/Images/logo.png"></div>
</div>

html,body{
  height : 100%;
  background : green;
}
.main-content{
  display : flex;
    height : 100%;
  flex-direction : column;
}

.GraphBackground{
clear : both;
height:auto;
width:100%;
background-color:#e1e5e8;
margin-top:2%;
padding:2% 0 2% 2%;
box-sizing: border-box;
display:flex;
}

.imageBackground{
height:auto;
width:100%;
background-color:#e1e5e8;
//margin-top:2%;
padding:0% 0 2% 2%;
box-sizing: border-box;
display:flex;
}

.imageBackground img{
width:200px;
height:200px;
margin:auto;
display:block;
padding-bottom:2%;
}

#chart1{
height:auto;
width:100%;
background-color:#f8f8ff;
display:block;
padding-bottom:2%;
}

#chart2{
height:auto;
width:100%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding-bottom:2%;
}

#chart3{
height:auto;
width:100%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding-bottom:2%;
}

#patternAnalysis{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
padding:2% 0 0 0;
}



#purchase{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding:2% 0 0 0;
}

#tam{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding:2% 0 0 0;
}

.flipcard {
  position: relative;
  width: 31.33%;
  height: auto;
  perspective: 500px;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
}
.flipcard.h .back{
  transform: rotateY(-180deg);
}
.flipcard .front
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  background-color: #f8f8ff;
  /*padding: 10px;*/
  backface-visibility: hidden;
}
.flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  background-color: #424242;
  /*padding: 10px;*/
  backface-visibility: hidden;
  display: table; 
}

.flipcard .back p{
    color:#fff !important;
    padding:5px;
    text-align:center;
    line-height:20px;
    font-family:'times new roman';
    font-size:1.5em;
  justify-content:center;
  align-content:center;
  display:table-cell;
  vertical-align:middle;
}

.clear-fix{
  clear : both;
  display : block;
}