Question

我有两个半宽div，它们具有相同的类但通过WordPress分配了帖子。目前我让它们排列在上方和下方的全宽柱上，但是，我需要将5px的填充应用于两个但不在边缘上，即左柱有右边衬垫，右边有左边填充，我想不出来我的生活如何做到这一点。我尝试使用不同的帖子格式并检查帖子的格式，并根据该格式应用填充，但它没有按预期工作。由于某种原因，它将div推到了中心，并在错误的位置填充。首先，这是我的PHP结构，带有if / else：

<?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/

Answer 1

有几种方法可以解决此问题，但这取决于您希望支持哪种类型的用户（和浏览器）。如果您不介意使用现代标准（因此将某些用户留在遗留浏览器后面），您可以使用calc属性：

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

p / s ：设置浮点数时不需要声明display: block属性 - 这仍然是浮点数的默认行为。

更好的是，您可以利用CSS flexbox，但您需要将.twocolumnpost的父级设置为具有弹性显示。假设父级的类名为.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。不完全相关，但解决了您目前面临的同一问题。

Answer 2

这可能只是一个空白问题。

你可以这样在你的div之间有一个html注释杀死空格，或者你可以浮动div。您可能需要重新修改包含元素，以确保花车不会做疯狂的事情。但是浮动左右两列（twocolumnpost）应该让它们相互齐平（除非它们有填充/边距）。

简而言之，我认为差距是由div与twocolumnpost类之间的空白创造的。如果你将这两个浮动在每个旁边或移除空格，你应该能够让它们相互冲洗。

将填充应用于通过WordPress创建的div时出现问题

2 个答案: