嵌套两个相邻的 div - WordPress答案

【问题标题】：Nesting two divs next to each other - WordPress嵌套两个相邻的 div - WordPress
【发布时间】：2015-12-18 15:05:36
【问题描述】：

我正在创建一个 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 并在第二个帖子上显示下一个。

【问题讨论】：

你能告诉我你的 div 类 pagination 来自哪里吗？看起来这就是让您感到困惑的原因（至少乍一看）。似乎每次有帖子时，这个pagination div 都会自行创建。它有一个最小高度，并且将每个柱子向下推，包括你的第二个两柱柱子。我刚刚删除了两者之间的分页，它排成一行，不完美，但更好。
作为旁注 - 分页是一个术语，用于对页面编号以加载下一组帖子。如果它在每个帖子之后加载，那么一旦超过分页阈值，您就会遇到每个帖子下都有数字的问题
干杯，在下面的评论中很伤心，没有意识到我在这段时间里移动了分页，为你的帮助欢呼，如果你有答案，它也会被接受！
没问题！点对我来说是次要的。我很高兴能帮上忙。干杯！

标签： php html css wordpress

【解决方案1】：

首先，摆脱空的分页divntgCleaner 是对的。

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

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

【讨论】：

非常感谢！我之前在 while 循环中没有分页，我真的不记得将它移到那里，但非常感谢，完全忘记了视频也是 iframe，因为它被设置为特色图像，所以我把它放在了我的脑海里“图片”。