2016-07-31 2 views
0

Действительно странно.
У меня есть элемент Div, который содержит счетчик, используя FlipClock.js
Справа от него есть какой-то запас, который я не могу переопределить в CSS.
Независимо от того, как я отношусь к элементу (встроенный стиль в инструментах или сам CSS, я не могу избавиться от него, и он подталкивает другой контент).
Вам понадобится F12 и выберите Div, у которого есть класс «флип-часы-обертка флекса».
Вы заметите, что выделение на нем показывает вам, что требуется дополнительное пространство, как если бы ему была назначена разница. Вот скрипку, в котором плагин и оригинальный CSS расположены:
FIDDLE
HTML:CSS - не удалось отключить поле для DIV, сгенерированное FlipClock.JS

<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 
}); 
+0

У CSS есть вещь, называемая «специфика». Вы должны больше узнать об этом в W3Schools или MDN. Я предполагаю, что ваш селектор не так специфичен, как библиотека. Или библиотека переопределила вашу, потому что она была объявлена ​​позже или использовала '! Important'. –

+0

Вы заглянули в Скрипку? Попробуйте сыграть с ним и посмотреть, что вы думаете после. У меня есть. –

+0

Извините. Я не видел этого сначала, потому что предположил, что вы попробовали «margin: 0»? Я не вижу, чтобы ваш код надеялся отключить маржу. –

ответ

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; 
} 

Fiddle or it didn't happen

PS: Обратите внимание на то, как я обновил CSS Selector от .flip-clock-wrapper ul к .flip-clock-wrapper ul.list, чтобы использовать поведение CSS специфичность для обеспечения моего стиля декларации переопределения один из файла CSS.

+0

Я не понимаю, потому что после часов все еще есть разрыв. Если вы выберете F12, вы можете заметить, что он выделяется при выборе. Я нахожусь в вашей Fiddle ... Если я дам фиксированную ширину 620px для обертки, числа присваиваются, но есть еще пробел, и он оставил остальную часть моего контента на странице (чего нет в FIddle). –

+0

Этот пробел состоит в том, что для селекторов '. Before' и': after' для '.fclock.flip-clock-wrapper' div применен стиль display: table. Просто измените его на 'display: none', и дополнительное пространство исчезнет. –

+0

Спасибо, я поработаю над этим ... –