将两个div拼接在一起 - WordPress

I'm creating a WordPress theme and can't get two posts to nest next to each other correctly, the guys on the WP forums haven't been any help (one response). Without any of the WP hookups (the PHP stuff) the divs nest correctly, I styled and structured them like this:

我正在创建一个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>

This works because I declared a post class twice inside the twocolumnpost. Now for the wordpress structure (same styling):

这是有效的,因为我在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>

This makes them nest weirdly as you can see here: http://suburbia.comoj.com/wordpress/

这让他们很奇怪,你可以在这里看到:http://suburbia.comoj.com/wordpress/

I'm struggling to get them to play ball and just sit next to each other with the correct padding and I'm not sure if this is because I've only declared one post in the twocolumnpost. If I do declare two posts, it doubles the image which isn't right.

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

So what I'm asking, is either to have the posts aligning nicely with current structure, or a method of checking the previous post for the first post id, and displaying the next one on the second post.

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

1 个解决方案

#1

First, get rid of the empty pagination div ntgCleaner is right that is messing it up.

首先,摆脱空的分页div ntgCleaner是正确的,这是搞乱它。

The other thing is that your CSS applies a 5px padding to .twocolumnpost img but the post on the left isn't an image, it's a video in an iframe tag so that isn't being applied. Either change the CSS selector to be .twocolumnpost img, .twocolumnpost iframe or remove the padding.

另一件事是你的CSS将5px填充应用于.twocolumnpost img,但左边的帖子不是图像,它是iframe标签中的视频,因此未应用。将CSS选择器更改为.twocolumnpost img,.twocolumnpost iframe或删除填充。

This is what it looked like when I did that:

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