居中使用砌體jquery的Wordpress組合嗎？

我有一個使用OrganicThemes - 攝影師主題的Wordpress網站。演示網站可以看這裏：http://organicthemes.com/demo/photographer/three-column-portfolio/居中使用砌體jquery的Wordpress組合嗎？

後，我定製了一段時間，我認識到了三列組合沒有在980px .row類居中。因爲這是使用Wordpress和PHP，所以當我在Chrome中檢查它時，它會在HTML中呈現出來，這讓我很難理解如何解決這個問題。

我收錄了我正面臨的問題的屏幕截圖。您可以在藍色框中看到第三個圖像（又名<div class="one-third masonry-brick">）未達到<div class="row holder-third masonry">的980像素標記，這使得第二個圖像不能正確居中，這基本上導致整個事物關閉。

screenshot

您可以找到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文件中的Masonry代碼，並可能更改div類的一些CSS。

我希望有人可以幫助更好地解釋這個問題，並可能闡明如何解決這個問題！提前致謝！

更新：我添加了一些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">，不知是否需要代碼，以解決我的問題將被添加到該區域？

來源

2014-05-08 user3251361

嘗試內部的'jquery.custom.js'改變'gutterWidth'（試着整數和在引號'whole_number + px'）和/或'columnWidth'，現在它是由圖3（1/3TH劃分從容器的寬度）。 – bodi0

@ bodi0感謝您回覆。當你說要改變'gutterWidth'時，請用引號中的整數和'whole_number + px'來嘗試，你的意思是這樣嗎？例如：'gutterWidth：'1'，''或'gutterWidth：'1px''？你和/或'columnWidth'是什麼意思？你的意思是我可以去'gutterWidth：'columnWidth'，'這將解決它？再次感謝你的幫助！ – user3251361

是的，'gutterWidth：「1px''和/或'gutterWidth：1'，對於'columnWidth'我的意思是不使用函數進行計算，因爲它是現在，但固定的（或百分比）的值。 – bodi0

我看到的東西，這可能是對您有用 - 在.one-third類有width:30.66%加margin-right:4%，其總計向34.66％佔用的空間，這是不 1/3TH 100％，要麼改變幅度，或者課程的寬度，或者用適當的寬度和邊距定義你自己的課程，覆蓋當前的課程。

另外，請記住，IE 8有一些錯誤與max-width/height與overflow: auto/scroll結合（在.row和.container.portfolio類使用）。

另一件事 - 不同的瀏覽器一輪浮點值不同 - 有些圓起來，有的輪他們到整數，如解釋here。

來源

2014-05-12 08:05:29 bodi0

居中使用砌體jquery的Wordpress組合嗎？

回答

相關問題