当前位置:  开发笔记 > 编程语言 > 正文

右侧浮动侧边栏,主要内容流动 - 如何?

如何解决《右侧浮动侧边栏,主要内容流动-如何?》经验,为你挑选了0个好方法。

我想创建一个网页布局,右侧边栏和侧边栏周围的主要内容.

要求:

    侧边栏下方的内容应占用所有可用宽度

    侧边栏下方的内容在触及侧边栏左侧时不应换行

    主要内容应位于标记的侧边栏之前

    边栏具有固定宽度但未知/可变高度

    仅限CSS - 没有JavaScript解决方案

这可以在没有第三个要求的情况下实现:如果侧边栏位于标记中的主要内容之前并且位于相同的包含元素内,则使用简单的右浮动来完成工作.标记中的主要内容之前的侧边栏不是此处的选项.侧边栏将包含补充信息和广告.如果这是在标记中的主要内容之前,那么对于CSSless浏览器和屏幕阅读器用户来说这将是烦人的(即使使用'skip to ...'链接).

这可以在没有第四项要求的情况下实现.如果侧边栏具有固定高度,我可以在主要内容之前放置一个包含元素,向右浮动并给它一个合适的宽度和高度,然后使用绝对定位将侧边栏放在预制空间的顶部.

示例标记(不含CSS,仅限相关位):


  

Lorem ipsum ....

Pellentesque ....

示例布局:

alt text http://webignition.net/images/layoutexample.png

我不确定这是否可行.我很高兴接受一个权威的答复,说明这是无法实现的.如果无法实现这一点,我会欣赏一个解释 - 知道为什么它无法实现比仅被告知它不能实现更有价值.

更新:我很高兴看到不符合所有五项要求的答案,只要答案说明哪些要求被忽略以及忽略要求的后果(利弊).然后,我可以做出明智的妥协.

更新2:我不能忽略要求3 - 侧边栏不能在内容之前.

推荐阅读
无名有名我无名_593
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有