css - 相对定位div重叠底部内容

Question

我正在尝试做一个移动优先的响应式布局。所以在我的 HTML 上有

First - Middle Content
Then - Left Content
Then - Right Content

在所有内容下方，我有一个单独的信息部分，从左到右全宽。

我使用 position:absolute 为中间、左边和右边的 div 定位它们。我的问题是，因为主要的 3 个 div 是绝对定位的，所以单独的部分位于主要内容下方并重叠。我怎样才能解决这个问题？

我有一个工作 fiddle here .

Answer 1

基本 float 示例:http://jsfiddle.net/UKKcq/11 基本显示:内联 block 示例:http://jsfiddle.net/UKKcq/19/

这里有几件事情需要考虑:

首先，您会注意到在第二个示例中，主要部分的文本从所有 3 个 div 下方开始。这是因为它们仍然是文档流的一部分，而在使用 float 时它们不是这样，因此文本环绕它们。

此外，对于第二个示例，我必须删除 div 之间的所有间距/换行符以阻止它们之间出现空格。内联 block 总是会发生这种情况，我使用以下 jQuery 函数来修复它以避免破坏标记的整洁性:

jQuery.fn.cleanWhitespace = function() {
            textNodes = this.contents().filter(
                function() { return (this.nodeType == 3 &&    !/\S/.test(this.nodeValue)); })
                .remove();
            return this;
        }
})();

$('INSERTPARENTDIVHERE').cleanWhitespace();

此外，我必须使用 vertical-align:top 因为默认情况下最短的 div(在本例中为中心)与另一个的底部对齐两个 div。

最后一个考虑因素是，当用户使用浏览器缩放或宽度、填充、边框或边距因任何原因发生变化时，这样的 inline-block 布局很可能会中断.您可以相对控制后面的因素，但要确保在用户缩放时不会掉到下一行(这看起来真的很糟糕)我建议将 white-space: nowrap; 应用到父级div 来尝试阻止这种情况。