0

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

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

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

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

我在这里有一个工作小提琴。

4

1 回答 1

1

基本浮动示例： http: //jsfiddle.net/UKKcq/11 基本显示：inline-block 示例：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以尝试防止这种情况发生。

于 2013-03-21T10:34:49.940 回答