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

【问题标题】：two divs side by side- one on far left, the other in middle两个 div 并排 - 一个在最左边，另一个在中间
【发布时间】：2012-06-20 12:25:13
【问题描述】：

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

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

@普拉文

【问题讨论】：

您面临的具体问题是什么？
@Cristoph 我不知道如何使两个 div 看起来与我的图像中的完全一样。目前，#recent-work 位于最左侧，#recent-blog 位于最右侧。我想让#recent-blog 的左边缘与容器的垂直中心对齐。
@AMC 你给了一个浮点数。我重置了！看看小提琴。希望有帮助！

标签： css html css-float padding margin

【解决方案1】：

在您的 CSS 中，请添加以下行：

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

更新：

我添加了这个：

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

【讨论】：

我为#recent-work 和#recent-blog 都做了这个，都没有显示任何变化..？
能否展示现场版本，以便我进行测试并获得正确的解决方案？即使它是您机器的 IP 地址，也可以。我希望我能访问。
我还没有该网站，但也许这会有所帮助.. index.html - pastebin.com/qej2G0V8 style.css - pastebin.com/Lhcg89ct
我将在我的原始帖子中添加一张图片，说明我已经做出了您推荐的更改。
@AMC 你给了一个浮点数。我重置了！看看小提琴。希望有帮助！

【解决方案2】：

希望我没看错 -

工作示例 - DEMO

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

【讨论】：