css - 2 列固定宽度侧边栏 w/流体内容未正确对齐

标签 css layout css-float positioning sidebar

我在设置 2 列布局时遇到过这个问题,其中固定边栏 float 到右侧。我在内容容器上设置了边距,以便在您调整浏览器窗口大小时它会流畅。

然而,内容部分实际上位于侧边栏的“上方”,因此新内容会将侧边栏推到页面下方。你可以看到一个 live demo here我为基本布局设置的。

我知道解决此问题的唯一方法是将侧边栏移动到我的 HTML 标记内容上方。但这并不是真正的解决方法,老实说,我希望我的内容出现在侧边栏之前,因为这就是文档的结构。有什么方法可以使 float 侧边栏与内容区域在顶部对齐?

最佳答案

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

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

由于您没有提供列的宽度,我使用了我自己的百分比。一旦它变得太薄,您可以使用媒体查询来清除侧边栏。

关于css - 2 列固定宽度侧边栏 w/流体内容未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12438684/

相关文章:

html - 如何垂直对齐 HTML 中的元素

HTML, CSS - <li> 元素不 float

html - 使包含元素的 div 适应不同的分辨率

android - 如何测试对 setContentView 的调用?

html - 将文本与 float :before icon 对齐

HTML CSS 主体自动调整大小

css - 使用 CSS 强制 float column-1 中的超宽元素出现在 float column-2 下方

html - 防止 float div 换行

css - 重新缩放图像以保持比例

html - 如何将整个表格单元格变成 HTML/CSS 中的链接?