要求：
>侧边栏下方的内容应占据所有可用宽度
>侧栏下方的内容在点击侧栏左侧时不应换行
>主要内容应位于标记中的侧边栏之前
>侧边栏具有固定宽度但未知/可变高度
>仅限CSS – 没有JavaScript解决方案
这可以在没有第三个要求的情况下实现：如果侧边栏位于标记中的主要内容之前并且位于相同的包含元素内,则使用简单的右浮动来完成工作.标记中的主要内容之前的侧边栏不是此处的选项.侧边栏将包含补充信息和广告.如果这是在标记中的主要内容之前,那么对于CSSless浏览器和屏幕阅读器用户来说这将是烦人的(即使使用’skip to …’链接).
这可以在没有第四项要求的情况下实现.如果侧边栏具有固定高度,我可以在主要内容之前放置一个包含元素,向右浮动并给它一个合适的宽度和高度,然后使用绝对定位将侧边栏放在预制空间的顶部.
示例标记(不含CSS,仅限相关位)：
<body> <div ID="content"> <p> Lorem ipsum .... </p> <p> Pellentesque .... </p> <div ID="sIDebar"> /* has some form of fixed wIDth */ </div> </div></body>
示例布局：
alt text http://webignition.net/images/layoutexample.png
我不确定这是否可行.我很高兴接受一个权威的答复,说明这是无法实现的.如果无法实现这一点,我会欣赏一个解释 – 知道为什么它无法实现比仅被告知它不能实现更有价值.
更新：我很高兴看到不符合所有五项要求的答案,只要答案说明哪些要求被忽略以及忽略要求的后果(利弊).然后,我可以做出明智的妥协.
更新2：我不能忽略要求3 – 侧边栏不能在内容之前.
解决方法 简单的浮动与相反的源顺序是不能完成的(没有CSS3草案规范).务实的方法是首先构建一个支持所需源顺序的漂亮布局. HTML：<div ID="content" > <div ID="floatSpace"></div> <p>Lorem ipsum ....</p> <p>Pellentesque ....</p> <div ID="sIDebar">content</div></div>
CSS：
#content {position:relative;}#sIDebar {wIDth:150px; position:absolute; top:0; right:0;}.noJs {padding-right:150px;}.noJs #floatSpace {display:none;}.Js #floatSpace {float:right; wIDth:150px;} 这满足除1和2之外的所有.现在,我们添加Js：
$(function () { // make floatSpace the same height as sIDebar $('#floatSpace').height($('#sIDebar').height()); // trigger alternate layout $('#content')[0].classname = 'Js';}); 这将使内容在#floatSpace周围浮动,#sIDebar将保持在其顶部.这比移动#sIDebar更好,因为源顺序保持不变(对于支持JavaScript的屏幕阅读器等).
这是一个JSFiddle of this in action.这种布局确实伴随着保持floatSpace高度与侧边栏高度同步的不幸要求.如果侧边栏是动态的或具有延迟加载内容,则必须重新同步.
总结以上是内存溢出为你收集整理的html – 右侧浮动的侧边栏,主要内容流动 – 如何？全部内容，希望文章能够帮你解决html – 右侧浮动的侧边栏,主要内容流动 – 如何？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）