Question

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

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

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

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

我有一个工作小提琴here。

Answer 1

基本花车示例：http://jsfiddle.net/UKKcq/11 基本显示：内联块示例：http://jsfiddle.net/UKKcq/19/

这里有一些值得考虑的事情：

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

另外，在第二个例子中，我不得不删除div之间的所有间距/换行符，以阻止它们之间出现的空格。这种情况一直发生在内联块中，我使用以下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（在本例中为中心），与其他两个divs的底部对齐。

最后一个考虑因素是，当用户使用浏览器进行缩放或者宽度，填充，边框或边距因任何原因而发生变化时，此类inline-block布局会出现断裂的趋势。您可以相对控制后面的因素但是为了确保当用户缩放时，事情不会下降到下一行（看起来非常糟糕）我建议将white-space: nowrap;应用于父div以尝试防止这种情况

相对定位div重叠底部内容

1 个答案: