2列固定宽度侧栏，流体内容没有正确对齐

我一直在遇到这个问题，用于设置2列布局，固定侧栏浮动到右侧。我在内容容器上设置了一个边距，以便在您调整浏览器窗口大小时保持流畅。2列固定宽度侧栏，流体内容没有正确对齐

但是，内容部分实际上位于侧边栏“上方”，因此新内容会将侧边栏向下推送至页面。您可以看到我为基本布局设置的。

我知道解决此问题的唯一方法是将边栏移到HTML标记中的内容上方。但是这并不是一个真正的解决方案，并且说实话，我希望我的内容能够出现在侧边栏之前，因为这就是文档的结构。有没有什么办法可以将浮动边栏与内容区域顶部对齐？

来源

2012-09-15 Jake

看一看媒体对象http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

演示：http://dabblet.com/gist/3729182

既然你没有为列提供的宽度，我用我自己的百分比。您可以使用媒体查询来清除边栏太细的边栏。

来源

2012-09-15 18:32:51 carpenumidium

我更新了一个[新dabblet]（http://dabblet.com/gist/3730082），它更好地展示了我目前的问题。右边栏应该宽度为250像素。请注意，如果您在左侧div上方剪切/粘贴右侧div，它将完美悬浮，否则会落在下面。 – Jake

这是因为您从左列删除了浮点数，并将其恢复为其默认属性“display：block”，因此右列清除。右列不要求'float：right'，因为它被赋予'overflow：hidden'，更多细节在我提供的媒体对象链接中。它非常值得一读，并可以避免重复代码。但是既然你想保存源代码顺序，你可以将这些列包装在一个.container中，并用一些小技巧做出流畅的网格：http://dabblet.com/gist/3730377。 – carpenumidium

这里发生的事情是，.container有一个等于右列宽度的'padding-right'右列给出'右：-100％'，将其拖到填充区域。这不一定是坏习惯，但我们必须处理这些黑客，直到我们掌握'calc（）'和'flexbox'。 – carpenumidium

2列固定宽度侧栏，流体内容没有正确对齐

回答

相关问题