php - 将两个 div 嵌套在一起 - WordPress

Question

我正在创建一个 WordPress 主题，但无法将两个帖子正确地嵌套在一起，WP 论坛上的人没有提供任何帮助(一个回复)。在没有任何 WP 连接(PHP 的东西)的情况下，div 正确嵌套，我将它们设计和结构化如下:

CSS:

.singlecolumnpost .post {
    float: left;
    display: block;
}

.twocolumnpost .post {
    float: left;
    display: block;
    width: 50%;
}

.singlecolumnpost img {
    display: block;
    max-width: 940px;
    max-height: 529px;
    width: 100%;
    padding: 5px 0;
}

.twocolumnpost img {
    max-width: 460px;
    max-height: 259px;
    width: 100%;
    padding: 5px 0 5px 0;
    z-index: 4;
}

.post-thumb {
    width: 100%;
    margin: 0 auto;
}

HTML:

<div id = "main">
    <div class = "singlecolumnpost">
        <div class = "post">
            <div class = "post-thumb">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
    </div>
    <div class = "twocolumnpost">
        <div class = "post">
            <div class = "post-thumb">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
        <div class = "post 2">
            <div class = "post-thumb 2">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
    </div>
    <div class = "singlecolumnpost">
        <div class = "post">
            <div class = "post-thumb">
                <a href = "#"><img src = "img/db.jpeg"</a>
            </div>
        </div>
    </div>
</div>

之所以可行，是因为我在 twocolumnpost 中声明了两次 post 类。现在是 wordpress 结构(相同的样式):

<div class = "twocolumnpost">
    <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">
                    <p class = "caption-text">Caption</p>    
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>

这使它们奇怪地嵌套，如您所见:http://suburbia.comoj.com/wordpress/

我正在努力让他们打球并用正确的填充物坐在一起，我不确定这是否是因为我只在 twocolumnpost 中声明了一个帖子。如果我确实声明了两个帖子，它会使图像加倍，这是不正确的。

所以我要问的是，要么让帖子与当前结构很好地对齐，要么检查前一篇帖子的第一个帖子 ID，然后在第二个帖子上显示下一个。

Answer 1

首先，摆脱空分页 div ntgCleaner 是正确的，它把它搞砸了。

另一件事是您的 CSS 对 .twocolumnpost img 应用了 5px 填充，但左侧的帖子不是图像，它是 iframe 中的视频标记，以便不被应用。将 CSS 选择器更改为 .twocolumnpost img、.twocolumnpost iframe 或删除填充。

这是我这样做时的样子: