Центр портфолио Wordpress, в котором используется каменная кладка jquery?

Question

У меня есть сайт Wordpress, который использует тему OrganicThemes - Photographer. Демонстрационный сайт можно посмотреть здесь: http://organicthemes.com/demo/photographer/three-column-portfolio/

После того как я настроить его на некоторое время, я понял, что портфель три колонки не центрирован в классе 980px .row. Поскольку это использует Wordpress и PHP, когда я проверяю его в Chrome, он выводится в HTML, что затрудняет мне понимание того, как исправить проблему.

Включая скриншот проблемы, с которой я столкнулся. Вы можете видеть в синем поле, что третье изображение (aka <div class="one-third masonry-brick">) не попадает на отметку 980px <div class="row holder-third masonry">, что делает второе изображение нецентрированным, что в основном заставляет все это отключиться.

Вы можете найти различную информацию о классе в style.css и organic-shortcodes.css, который помогает для понимания .row и .one-third классов, но я думаю, что реальная проблема заключается в файле jquery.custom.js. Я считаю, что основной код в том файле, который волнует проблема заключается в следующем:

/* Masonry ---------------------*/ 
    function masonrySetup() { 
    $('.holder-third').masonry({ 
    itemSelector : '.one-third', 
    gutterWidth : 0, 
    isAnimated: true, 
    columnWidth : function(containerWidth) { 
     return containerWidth/3; } 
    }).imagesLoaded(function() { 
    $('.holder-third').masonry('reload'); 
    }); 

Я попытался выяснить, как это исправить, но все, что я мог придумать, как исправить обработанную HTML код, который в основном должен был сделать второе окно изображения на left: 340px;, а третье окно изображения должно быть в left: 680px;, что затем сделало бы их центрированными и ровными.

Но я знаю, что это не поможет. Как-то мне нужно исправить код масонства в пользовательском файле jquery и, возможно, изменить некоторые CSS-классы div.

Я надеюсь, что кто-то поможет лучше объяснить проблему и, возможно, пролить свет на то, как исправить эту проблему! Заранее спасибо!

UPDATE: Я добавил некоторые коды стилей CSS в случае, если это более полезно, чтобы найти решение проблемы.

Компоновка вынесенное в инспектировать элемента в Chrome заключается в следующем:

<!-- .container portfolio --> 
<div class="container portfolio"> 
<!-- BEGIN .row --> 
<div class="row holder-third masonry" style="position: relative; height: 827px;"> 
<!-- BEGIN .one-third --> 
<div class="one-third masonry-brick" style="position: absolute; left: 0px; top: 0px;"> 
<!-- BEGIN .one-third --> 
<div class="one-third masonry-brick" style="position: absolute; left: 326px; top: 0px;"> 
<!-- BEGIN .one-third --> 
<div class="one-third masonry-brick" style="position: absolute; left: 653px; top: 0px;"> 

То, что я не понимаю, как это позиционирование работает, когда CSS не говорит абсолютной? И я не вижу никакого класса masonry-brick где угодно ... откуда это?

container portfolio CSS:

.container.portfolio { 
    background: none; 
    overflow: visible; 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
} 
.container { 
    background: #FFFFFF; 
    max-width: 980px; 
    margin: 0px auto 0px; 
} 

row CSS:

.row { 
    width: 100%; 
    max-width: 980px; 
    min-width: 727px; 
    margin: 0 auto; 
} 

one-third CSS:

.container.portfolio .one-third { 
    max-width: 312px; 
    margin: 0px; 
    padding: 0px; 
} 
* Columns * 
.one-third { 
    width:30.66%; 
} 
.one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth { 
    position: relative; 
    margin-right: 4%; 
    float: left; 
} 

И тогда это код, который, кажется, отношение к проблеме с файл template-portfolio-three.php.

<!-- .container portfolio --> 
<div class="container portfolio"> 

<!-- BEGIN .row --> 
<div class="row holder-third"> 

    <?php $wp_query = new WP_Query(array('cat'=>of_get_option('category_portfolio_three'),'posts_per_page'=>of_get_option('postnumber_portfolio_three'),'paged'=>$paged)); ?> 
    <?php if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post(); ?> 
    <?php $meta_box = get_post_custom($post->ID); $video = $meta_box['custom_meta_video'][0]; ?> 
    <?php global $more; $more = 0; ?> 

    <!-- BEGIN .one-third --> 
    <div class="one-third"> 

     <!-- BEGIN .postarea portfolio --> 

Я вижу <div class="one-third"> и интересно, если код должен быть добавлен в этой области для того, чтобы исправить мою проблему?

Answer 1

я вижу что-то, что может быть полезно для вас - .one-third класса имеет width:30.66% плюс margin-right:4%, который составляет до 34,66% занимаемого пространства, которое не 1/3-й из 100%, либо изменить запас, или ширину класса, или определить свой собственный класс с надлежащей шириной и полями, перезаписывая текущие.

Кроме того, имейте в виду, что IE 8 имеет некоторые ошибки с max-width/height в сочетании с overflow: auto/scroll (который используется в .row и .container.portfolio класса).

Другое дело - разные браузеры вокруг значений с плавающей запятой по-разному - некоторые округляют их, некоторые округляют их до целого числа, как объясняется here.