jquery - 布局中的 CSS 问题。在不影响布局的情况下翻转所有相邻的div

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

我只想让第一张图中发生的同样事情发生在第二张和第三张图中。

下面是正确翻转的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>

<div id="chart2"></div> 
<div id="chart3"></div>

当我尝试对图表 2 和图表 3 执行相同操作时，它搞砸了。我什至尝试更改类名并为其他图形制作单独的 CSS。但是，失败了。以下是我尝试过的。 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>
<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>

这是我的 CSS :

.GraphBackground{
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:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding-bottom:2%;
}

#chart3{
height:auto;
width:31.33%;
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;
}

最佳答案

您的主要问题是，一旦您对所有图表都进行了 .flipcard 处理，所有内容都是 position: absolute，这意味着这些元素不会贡献任何高度。这导致整个顶部的高度为零。

我做了以下更改:

到 HTML:
- 将图表更改为全部使用事件挂图结构(从您的问题中复制)
致 CSS:
- 将所有边的 .GraphBackground 填充更改为 2%，并且 justify-content: space-between，只是为了让卡片间隔开均匀地输出(这与解决您的特定问题无关)
- 从 #chart2 和 #chart3 中删除了 width:31.33%;(它们应该具有容器的完整宽度，即卡)
- 从 .flipcard .front 中删除了 position:absolute，这是最重要的更改，因为这意味着 .flipcard 现在有一个再次固有高度
- 将 top: 0 添加到 .flipcard.back，因为 .front 不再是绝对定位的，. back的默认位置在.front的下方，所以我们必须专门将它移到顶部。

这是应用了这些更改的版本:

var chart1 = c3.generate({
    bindto: '#chart1',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});


var chart2 = c3.generate({
bindto:'#chart2',
     data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

var chart3 = c3.generate({
bindto:'#chart3',
     data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

.GraphBackground{
height:auto;
width:100%;
background-color:#e1e5e8;
margin-top:2%;
padding:2% 2% 2% 2%;
box-sizing: border-box;
display:flex;
justify-content: space-between;
}

.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;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding-bottom:2%;
}

#chart3{
height:auto;
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;
  top: 0;
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.css"></link>
<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>
<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>

关于jquery - 布局中的 CSS 问题。在不影响布局的情况下翻转所有相邻的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43934800/

jquery - 布局中的 CSS 问题。在不影响布局的情况下翻转所有相邻的div

上一篇：html - 图像问题周围的 float 文本

下一篇：javascript - Draft.js和stateToHTML，如何在react组件中渲染输出html？