0

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

无论如何，这就是我正在查看的内容： 当前的

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

内容内容内容| 内容内容内容

#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 -->
4

5 回答 5

1

看来你没有为你的分隔线设置浮动。添加：

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

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

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

此处的示例（滑动左侧部分，使视口变得足够大）

于 2012-06-18T15:35:04.253 回答
1

我建议先谷歌搜索。看起来任何最佳结果都可以根据您的需要进行调整。

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

我基于表格的 Rorok_89 答案版本。事实上，也许不是我说的“最简单的”。CSS 更简单，但 HTML 中有更多字符。我会注意到 CSS 可以比示例更简单。

于 2012-06-18T15:42:44.903 回答
0

我可以建议一种不同的方法吗？

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

但如果您不喜欢使用表格，您可以随时使用 position: absolute 和 position 以及边距和填充。

于 2012-06-18T15:33:24.920 回答
0

也尝试使用float: left;#recent-blog。和：

#recent .divider {
    float: left;
}
于 2012-06-18T15:35:52.523 回答
0

试试这个到最近的 div

white-space:nowrap;
于 2012-06-18T15:39:52.073 回答