我正在使用这个 jQuery 插件:https://nnattawat.github.io/flip/
问题是,当我翻转一个 div 时,翻转后的 div 比它应该的要小。看看这个 gif:
我希望翻转后的 div 的大小与原始 div 的大小相同。出了什么问题?
这是我的实现:
<div class="col-xs-6 col-sm-4 col-md-3">
<div id="<%=i%>" value="<%=card[1]%>" class="flip p-2">
<div class="front yellowishcard text-center cardsize p-3">
<%= card[0] %>
</div>
<div class="back yellowishcard text-center cardsize p-3">
<%= card[0] %>
</div>
</div>
</div>
如您所见,两个 div 具有相同的类,除了“front”和“back”。我检查了我的 css 文件,我没有在正面或背面添加任何样式。
我的CSS:
.yellowishcard {
background: #F3E380;
background-image: -webkit-linear-gradient(top, #F3E380, #E7C700);
background-image: -moz-linear-gradient(top, #F3E380, #E7C700);
background-image: -ms-linear-gradient(top, #F3E380, #E7C700);
background-image: -o-linear-gradient(top, #F3E380, #E7C700);
background-image: linear-gradient(to bottom, #F3E380, #E7C700);
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
-webkit-box-shadow: 4px 4px 10px #666666;
-moz-box-shadow: 4px 4px 10px #666666;
box-shadow: 4px 4px 10px #666666;
}
.cardsize {
height: 250px !important;
display:flex;
align-items:center;
}
“p-2”和“p-3”是 Bootstrap 4 中的类:https://v4-alpha.getbootstrap.com/utilities/spacing/
'flip' 没有样式,它只是为了让我的 javascript 工作。
同样的问题发生,当我只使用这些类时:back yellowishcard
和 front yellowishcard
。
最佳答案
我发现了问题。 KresimirPendic 暗示了这个问题。问题是由 p-2 引起的。当我将 p-2 更改为 m-2 时,问题就消失了。工作实现:
<div class="col-xs-6 col-sm-4 col-md-3">
<div id="<%=i%>" value="<%=card[1]%>" class="flip m-2">
<div class="front yellowishcard text-center cardsize p-3">
<%= card[0] %>
</div>
<div class="back yellowishcard text-center cardsize p-3">
<%= card[0] %>
</div>
</div>
关于jQuery - 翻转 : Size of flipped div is smaller than the front div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47865282/