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;}

​</p>

Answer 2

希望我做对了-

工作示例 -演示

HTML

<div class="wrap">
<div class="leftCont">
    <div class="leftEle"></div>
    <div class="leftEle"></div>
    <div class="leftEle"></div>
</div>
<div class="rightCont">
    <div class="rightEle"></div>
    <div class="rightEle"></div>
    <div class="rightEle"></div>
</div>
</div>​

CSS -

.rightCont , .leftCont{
width:50%;
float:left;
background-color:green;
min-width:340px;
}
.wrap{
padding-top:20px;
width:100%;
min-width:600px;
height:150px;
overflow:hidden;
background-color:black;
}
.leftEle , .rightEle{
width:30%;
border:2px solid black;
min-width:100px;
float:left;
background-color:yellow;
height:100px;
}

​</p>