有問題的應用填充通過WordPress創建的div div

我有兩個半寬div具有相同的類，但通過WordPress分配的職位。目前，我有他們與全長帖子上下排列，但是，我需要應用5px的填充，但不是在邊緣，即左側的帖子有正確的填充，右側的帖子已經離開填充，我不能想到我的生活如何做到這一點。我嘗試使用不同的帖子格式，並檢查帖子的格式，然後應用填充，但沒有按預期工作。出於某種原因，它將div推到了中心，並在錯誤的地方填充了填充。首先這裏是我用的if/else PHP結構：有問題的應用填充通過WordPress創建的div div

<?php if (has_post_format('status')) : ?> 

    <div class = "twocolumnpost left"> 
     <div <?php post_class() ?>> 
      <?php if (has_post_thumbnail()) : ?>        
       <div class = "post-thumb">          
        <a href="<?php echo the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> 
        <div class = "caption"> 
         <h4><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></h4> 
         <p><?php echo get_the_date(); ?></p> 
        </div> 
       </div> 
      <?php endif; ?> 
     </div> 
    </div> 

<?php elseif (has_post_format('gallery')) : ?> 

    <div class = "twocolumnpost right"> 
     <div <?php post_class() ?>> 
      <?php if (has_post_thumbnail()) : ?>        
       <div class = "post-thumb">          
        <ahref="<?php echo the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> 
        <div class = "caption"> 
         <h4><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></h4> 
         <p><?php echo get_the_date(); ?></p> 
        </div> 
       </div> 
      <?php endif; ?> 
     </div> 
    </div> 
<?php endif; ?>

enter image description here

正如你可以看到它在左，右兩側填充（它應該與上面的後排隊），並沒有足夠的在中間。我爲此使用的CSS是：

.twocolumnpost .post { 
    float: left; 
    display: block; 
    width: 50%; 
    padding: 10px 0px; 
} 

.twocolumnpost.left { 
    padding-right: 0px; 
} 

.twocolumnpost.right { 
    padding-left: 0px; 
} 

.twocolumnpost img, .twocolumnpost iframe { 
    max-width: 440px; 
    max-height: 294px; 
    width: 100%; 
    padding: 0; 
}

現在，我想它是象是這樣的：

enter image description here

但在這兩個職位的中心填充的10px的，但不是左邊的5px，右邊的5px。與第二個圖像的唯一區別是圖片的最大寬度設置爲450px而不是400px，顯然沒有左側或右側填充。

無論我嘗試什麼，它都不能正確排列，而且我不知所措。任何幫助將不勝感激。理想情況下，這可以在不需要兩種不同的帖子類型的情況下完成，因此它適用於任何雙列柱，但結構也是可行的。謝謝！

現場坐是在這裏：http://suburbia.comoj.com/wordpress/

來源

2014-03-26 Adam Short

你能告訴我們一個HTML輸出示例嗎？ – Terry

@Terry我該如何着手解決這個問題？對不起，這樣一個愚蠢的問題。 –

不，沒關係。我瞭解你的代碼......只是讓用戶更容易用具體的HTML代碼來手工查看問題，特別是當他們不熟悉PHP或WordPress（或兩者）時。 – Terry

解決此問題的方法有多種，但取決於您希望支持哪種用戶（和瀏覽器）。如果你不介意使用現代化的標準（因此留在後面的舊版瀏覽器一些用戶），您可以使用該calc屬性：

.twocolumnpost { 
    width: calc(50% - 10px); 
    padding: 10px 0px; 
} 
.twocolumnpost.left { 
    float: left; 
} 
.twocolumnpost.right { 
    float: right; 
}

P/S：你並不需要聲明display: block屬性當你設置浮動—無論如何，這是浮動的默認行爲。

更好的是，您可以利用CSS flexbox，但您需要將.twocolumnpost的父級設置爲flex顯示。比方說，父母有.twocolumnpost-parent類名稱：

.twocolumnpost-parent { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%; 
} 
.twocolumnpost .post { 
    width: calc(50% - 10px); 
}

你可以看到，有證據的概念小提琴這裏：http://jsfiddle.net/teddyrised/DMy7r/

更新：在一個相關的說明，我寫了一個jQuery腳本來完成相同的操作，但使用了圖庫圖像。也許你可以適應你的需求：Responsive Photosets。不完全相關，但解決了您目前面臨的相同問題。

來源

2014-03-26 17:06:21 Terry

我無法讓你的第二個解決方案正常工作，因爲還有其他元素可以在twocolumpost的父級上繼承，即使只有一個包裝器，它只會發出一個帖子的全角。最上面的解決方案只是減少了兩個帖子的寬度，並帶有不正確的填充：http://imgur.com/1SuHHov –

@AdamShort查看更新的代碼和附加的JSFiddle示例。 – Terry

感謝您的好例子，不幸的是它仍然無法正常工作。而不是截圖中發生的事情，他們現在坐在彼此的頂部，與imgur鏈接的寬度相似。 –

這可能只是一個空白的問題。

你可以像你的div之間有一個html註釋來殺死空白，或者你可以浮動divs。你可能不得不重做包含元素，以確保浮游物不會做瘋狂的事情。但是浮動左列和右列（twocolumnpost）應該讓它們相互衝突（除非它們上有填充/邊距）。

總之，我認爲差距是由兩列divspost類的divs之間的空格造成的。如果你將這兩個字符放在每個字符旁邊或刪除空白字符，你應該可以使它們相互衝突。

來源

2014-03-26 16:58:52 Brodie

有問題的應用填充通過WordPress創建的div div

回答

相關問題