Question

今天早上我一直在努力解决这个问题。我正在创建最终将成为WP主题的内容，该主题将包含最近的一部分工作，一个分隔符，以及最近一些横向对齐的博客文章。事情开始变得很好，但最右边的部分不断被推倒。我不认为这是一个宽度问题，因为a）似乎有足够的空间和b）无论我对各种宽度和填充做什么，问题仍然存在。我觉得它可能与浮动有关，但我不确定如何解决这个问题。

无论如何，这就是我所看到的： current

我希望它是这样的，分隔符完美地位于页面的中心：

内容内容|内容内容

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

#recent .divider {
}

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

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

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

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

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

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

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

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

和

<div id="recent">
    <div id="recent-work">
           <p><span>Recent Work</span></p>
           <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
               <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
               <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
    </div><!-- end recent-work -->

    <div class="divider">
        <img src="img/divider.png" alt="Section divider" />
    </div><!-- end divider -->

    <div id="recent-blog">
        <p><span>Recent Blog</span></p>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
            <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a>
       </div><!-- end recent-blog -->
</div><!-- end recent -->

Answer 1

您似乎没有为分隔符设置浮动。添加：

#recent .divider {
display: block; 
float: left;
}

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

您应该为所有div添加display：block属性，以防万一。

示例here（向左滑动以使视口变得足够大）

Answer 2

我建议先Google search。看起来任何顶级结果都可以根据您的需求进行调整。

当然，最简单和最强大的方法是使用一个简单易用的TABLE，并在过去十年的所有平台上正常工作。对于需要极端设置（例如非常大的缩放级别）的人来说，它也会正确降级。它也不需要任何花哨的CSS，HTML5或覆盖来修复损坏的IE版本。

My version of Rorok_89's answer based on tables。事实上，也许不像我说的那样“最简单”。 CSS更简单，但HTML中还有一些字符。我会注意到CSS可以比示例更简单。

Answer 3

我可以建议采用不同的方法吗？

表格的使用在这里非常方便，因此请使用<tr>和<td>标签轻松对齐元素。

但是如果你不喜欢使用表格，你可以随时使用position：absolute和position with margin and paddings。

Answer 4

尝试使用float: left;到＃recent-blog。和

#recent .divider {
    float: left;
}

Answer 5

试试这个最近的div

white-space:nowrap;

连续3个div-无法获得最右边的对齐

5 个答案: