css - 两个div并排-一个在最左边，另一个在中间

Question

我正在创建一个 WP 主题，它在页面中间有两个部分。左边是“最近的工作”，右边是“最近的博客文章”。我希望“最近的博客文章”从页面中间开始；它的左边缘与容器的水平中点对齐。我还希望有一条垂直线将两者分开。 我玩过边距和填充，但似乎无法达到我想要的效果。这是我想要的图片:

<div id="recent">
    <div id="recent-work">
            <p><span>Recent Work</span></p>

    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end recent-work -->
    <div id="recent-blog">
        <p><span>Recent Blog</span></p>

    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end recent-blog -->
</div><!-- end recent -->

和

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent #recent-work {
    float: left;
}

#recent #recent-work .next{
    float: right;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-blog {
    float: right;
}

#recent #recent-blog .next{
    float: right;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

从昨天开始我就一直在努力解决这个问题，所以非常感谢任何和所有的帮助。

@普拉文

Answer 1

在您的 CSS 中，请添加这一行:

#recent #recent-work p {text-align: center;}

更新:

我添加了这个:

#recent #recent-work p, #recent #recent-blog p {text-align: center;}