我目前有一个宽度为div的div:自动填充整个屏幕宽度,但我想在右侧放置一个侧边栏.
当我浮动宽度时:自动div向左,固定宽度div向右,而是向下移动.
我基本上都在寻找类似于reddit的东西,在右侧宽度上有搜索栏,内容自动调整到页面宽度.
谢谢
当我浮动宽度时:自动div向左,固定宽度div向右,而是向下移动.
我基本上都在寻找类似于reddit的东西,在右侧宽度上有搜索栏,内容自动调整到页面宽度.
谢谢
解决方法
你可以这样做:
<div id="container"> <div id="autowidth">text expands her...</div> <div id="fixed">This is a fixed column</div> </div>
在你的CSS中:
#container { width:100%; border:1px solid black; padding-right:200px; } #autowidth{ width:100%; background-color:red; float:left; } #fixed{ width:200px; background-color:green; float:right; margin-right:-200px; }
基本上,父容器将所有内容保存在一起.它的填充量为200px(右侧col的宽度),因此其内容不会超出该点.反过来,右侧col的边距为-200px,因此它会强制父级填充所施加的边界,并将其自身始终置于最右侧.实际上,另一个div现在只有父容器提供的空间,受其填充限制,因此它的100%实际上是(100% – (父级填充)).你可以在这里看到这个的工作结果:jsfiddle.
我很确定那里可能会有更优雅的解决方案,所以请耐心等待.
如果你想给一个背景,比如2个cols,你可以选择经典的“人造列”背景(参见a list apart的例子)
原文地址:https://www.jb51.cc/css/215469.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。