列中的Wordpress帖子

我想創建一個wordpress主題。我想要有三篇專欄文章。但問題是，他們並不總是有相同的高度（我不希望他們），所以當一行中的帖子太高時，下一行將開始太遠。列中的Wordpress帖子

嗯，我真的可以解釋它，所以我創造了這個小提琴說明我的意思：

//in the fiddle there is html and css making a clear example of what i mean

http://jsfiddle.net/59qyD/1/

正如你所看到的帖子ID＃5太長，所以發帖＃ 7在＃4之後不再發生。

我想要的是找到一個解決方案，其中的帖子總是「上去」到該列中的上一篇文章。如果可能，沒有任何插件...

任何想法？

來源

2014-01-18 Boguz Didgeridoo

要創建動態柱高度無論是圖像/職位/產品，你可以申請Masonry JS

這個js爲您提供適合從上面的線前面的格下的每個新的div的可能性，並有展示它的效果非常好。

來源

2014-01-18 10:31:44 Liza

是的，砌體非常好。我想使用一個插件，只是最後的手段，但也許我會來的，無論如何！ ;） –

你不需要使用插件（我不確定哪怕只有一個插件），你只需要使用JS並使它適合你的需求（配置選擇器等）;） – Liza

（+1））我剛剛查看了一個演示網站，並且它看起來很有反應（另請請求作者）！儘管如此，仍然有不同的解決方案（僅適用於CSS - 僅適用於現代瀏覽器），PHP + CSS（適用於所有瀏覽器，但應該爲每個帖子創建多個類），可能還有更多JS解決方案（這只是JS選項中的一個））... – Minister

這裏是一個PHP + CSS基礎的解決方案：

PHP：

$count = 0; 
$count_total = 10; // or use dynamic count: count($all_posts) 
$columns = 3; 
foreach ($all_posts as $k=>$v) { 
    $count++; 
    $is_first_column = false; // always set to false, then set to true only when the condition matches! 
    // Now check is this a post for the first column 
    if($count==1 || ($count-1)%$columns==0) { // check if it's 1st and every 4,7,10 post and place it in 'column 1' 
     // set additional class for every post that need to be placed in the first column 
     $is_first_column = true; 
    } 

    // Now you can add the additional class to the html markup: 
    <article id="post-<?php the_ID(); ?>" class="post col<?php if(!empty($is_first_column)) { echo ' column_1'; } ?>"> 


}

然後用CSS來清除浮動，每.column_1。

CSS：

.column_1 { 
    clear: both; 
}

我曾經在多個項目中類似的方法和它的工作。上面的代碼可能需要修改一下才能適用於您的特定主題，但我希望您能得到主要想法。

它會在頁面+ CSS加載後立即工作（不等待JS加載）！ :-)

來源

2014-01-18 10:41:26 Minister

有沒有辦法讓這個響應？比方說，當寬度<800像素，然後只使用兩列？那將是WOWOW！ =）我會嘗試。謝謝！ –

您能否檢查以下想法（示例1＆2）：（通過搜索找到：偶數類型的奇數css）http://www.w3schools.com/cssref/sel_nth-of-type.asp（還有請注意：除了IE8和更早版本之外，所有主流瀏覽器都支持：nth-of-type（）選擇器）。所以如果你需要IE8和更早的版本，JS解決方案將是必要的。 – Minister

我剛剛意識到您可以使用上述PHP解決方案併爲每列生成2個類！例如，當你有3列使用類：col3_1，co3_2和col3_3;當你有2列使用：col2_1和col2_2。然後，你可以將「col3_1，co3_2和col3_3」設置爲例如960+寬度，「col2_1和col2_2」設置爲更少... :-) – Minister

列中的Wordpress帖子

回答

相關問題