jQuery的 - 翻轉：翻轉格的尺寸比前格

我使用這個jQuery的小插件：https://nnattawat.github.io/flip/jQuery的 - 翻轉：翻轉格的尺寸比前格

的問題是，當我翻轉一個div，翻轉格是比它應該更小是。看看這個GIF：

我想的是，翻轉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的具有相同的類，除了「前」和「後退」。我檢查了我的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' 是從引導4類：https://v4-alpha.getbootstrap.com/utilities/spacing/

'炫' 沒有風格，只有在那裏我的javascript上班。

同樣的問題發生時，我只使用這些類：back yellowishcard和front yellowishcard。

來源

2017-12-18 Metaphysiker

'顯示：塊;'應該修復它爲'.cardsize' – Martijn

@Martijn我已刪除「顯示：彎曲;」並添加了「display：block」，但同樣的問題依然存在。還有什麼建議？ – Metaphysiker

嘗試從'.cardsize'刪除'align-items' ..你已經有bootstraped'text-center'類定義..或者嘗試從html中刪除那個類 –

我發現了這個問題。這個問題被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>

來源

2017-12-18 10:02:41 Metaphysiker

很高興爲你工作:)乾杯 –

jQuery的 - 翻轉：翻轉格的尺寸比前格

回答

相關問題