Lorem ipsum ....
Pellentesque ....
我想创建一个网页布局,右侧边栏和侧边栏周围的主要内容.
要求:
侧边栏下方的内容应占用所有可用宽度
侧边栏下方的内容在触及侧边栏左侧时不应换行
主要内容应位于标记的侧边栏之前
边栏具有固定宽度但未知/可变高度
仅限CSS - 没有JavaScript解决方案
这可以在没有第三个要求的情况下实现:如果侧边栏位于标记中的主要内容之前并且位于相同的包含元素内,则使用简单的右浮动来完成工作.标记中的主要内容之前的侧边栏不是此处的选项.侧边栏将包含补充信息和广告.如果这是在标记中的主要内容之前,那么对于CSSless浏览器和屏幕阅读器用户来说这将是烦人的(即使使用'skip to ...'链接).
这可以在没有第四项要求的情况下实现.如果侧边栏具有固定高度,我可以在主要内容之前放置一个包含元素,向右浮动并给它一个合适的宽度和高度,然后使用绝对定位将侧边栏放在预制空间的顶部.
示例标记(不含CSS,仅限相关位):
Lorem ipsum ....
Pellentesque ....
/* has some form of fixed width */
示例布局:
alt text http://webignition.net/images/layoutexample.png
我不确定这是否可行.我很高兴接受一个权威的答复,说明这是无法实现的.如果无法实现这一点,我会欣赏一个解释 - 知道为什么它无法实现比仅被告知它不能实现更有价值.
更新:我很高兴看到不符合所有五项要求的答案,只要答案说明哪些要求被忽略以及忽略要求的后果(利弊).然后,我可以做出明智的妥协.
更新2:我不能忽略要求3 - 侧边栏不能在内容之前.