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内两次宣布了一个帖子类。现在为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或删除填充。

这就是我这样做时的样子：

enter image description here

将两个div拼接在一起 - WordPress

1 个答案: