具有源有序内容的 CSS 布局

标签 css

开始怀疑我是否遗漏了一些明显的东西,但我已经搜索了好几天了,但仍然无法找到明确的答案。

我正在寻找的是一个源排序的内容 CSS 布局,用于两列页面(右侧的菜单),带有页眉和粘性页脚,最好没有讨厌的黑客攻击。首选来源顺序:
{内容}
{右键菜单}
{页脚}
{标题}

就像我说的,我在尝试为自己构建这个方面并没有走得太远,我也无法在任何地方找到合适的示例。有什么建议吗?

谢谢

最佳答案

content right, with sidebar left 可能是最容易制作的 float 布局,只需将内容向右浮动一个宽度,让左边用溢出填充空间以避免换行。页脚通过清除在下方。

至于标题,在源代码中首先放置一个假的标题 div,假设其中可能有 Logo 或其他内容,即使如果有一个大的下拉菜单,您可能不希望那里有成群的链接在那里或类似的东西。无论如何,我会让“假”标题足够高以创建您需要的空间,然后将任何实际内容放入其中,然后将您想要显示在顶部的内容仅放在底部的 div 中并绝对定位。

这是一个 fiddled mockup

关于具有源有序内容的 CSS 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5379406/

相关文章:

javascript - Google geochart 如何向右指针显示工具提示框

html - CSS 网格,自动填充 + 按内容设置的宽度

css - :focus:required:invalid:focus and :focus:required:invalid?有什么区别

css - 如何管理导航菜单的 z-index?

javascript - 在网站上无限滚动的图像裁剪

javascript - 如何在 JavaScript/CSS 中检测 MAC OS 反转颜色模式?

HTML 字体在不同元素上不匹配

javascript - 在 Head Container 达到最小高度后开始主体滚动

javascript - 从底部到顶部旋转 Div

html - 什么 CSS 可以防止这些嵌套列表项重叠?