0

本当に奇妙なもの。
FlipClock.js を使用したカウンターを含む Div 要素が
あります。CSS でオーバーライドできない右側にある種の余白があります。
要素をどのように処理しても (ツールまたは CSS 自体のインライン スタイル、それを取り除くことができず、他のコンテンツをプッシュしています)。
F12 が必要になり、クラス「fclock Flip-clock-wrapper」を持つ Div を選択します。
余白が割り当てられているかのように余分なスペースが必要であることが強調表示されていることに気付くでしょう。プラグインと元の CSS が配置されているフィドルは次のとおりです:
FIDDLE
HTML:

    <td>
      <div class="fclock"></div>
    </td>

CSS オーバーライド:

    .fclock {
transform-origin: 0 0;
transform: scale(.30);
-ms-transform: scale(.30);
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.30);
-o-transform-origin: 0 0;
-o-transform: scale(.30);
-moz-transform-origin: 0 0;
-moz-transform: scale(.30);
}

JS:

     var currentDate = new Date(); 
// Set some date in the future. ***change to desired date***

var futureDate = new Date(2016, 07, 30, 08, 0, 0); //fixed as per comments
// Calculate the difference in seconds between the future and current date 
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000; 

var clock = $('.fclock').FlipClock(diff, {
   clockFace: 'DailyCounter',
   countdown: true
});
4

1 に答える 1

0

.flip-clock-wrapper ul以下に示すように、flipclock.cssのスタイル定義をオーバーライドします。

コード：

.flip-clock-wrapper ul.flip {
    position: relative;
    float: left;
    margin: 5px;
    width: auto;
    height: 80px;
    font-size: 22px;
    font-weight: bold;
    line-height: inherit;
    border-radius: 6px;
    background: #000;
    padding: 24px;
}

フィドルまたはそれが起こらなかった

PS: CSS セレクターを から.flip-clock-wrapper ul に更新し.flip-clock-wrapper ul.listて、CSS 固有の動作を使用して、スタイル宣言が CSS ファイルのスタイル宣言をオーバーライドするようにしたことに注目してください。

于 2016-07-31T12:02:29.550 に答える