css左右列固定
回答
position:fixed
取元件从元件的正常 “流” 的。我通常通过将中间列的margin-left
设置为等于左列的宽度加上所需的排水沟来避开这种情况。例如,如果左栏为250像素,排水槽为25像素,则中间栏的margin-left
为275像素。
示例代码(这保持在宽度中间列液):
#wrapper { position: relative; min-width: 800px; max-width: 1000px; margin-left: auto; margin-right: auto; }
#left-col { position: absolute; top: 0; left: 0; width: 250px; }
#right-col { position: absolute; top: 0; right: 0; width: 250px; }
#middle-col { position: relative; margin-left: 275px; min-width: 250px; max-width: 450px; }
<div id="wrapper">
<div id="left-col"> left </div>
<div id="middle-col"> middle </div>
<div id="right-col"> right </div>
</div>
它的工作原理。它的包装必要? – nuttynibbles 2011-03-21 15:17:10
@nuttynibbles,它没有看到我的示例 – Bazzz 2011-03-21 15:19:03
这不是必需的。我添加它以提供三件事:1.)内容区域居中,2.)内容区域的最大宽度,3)和位置:相对。如果需要,您可以使用'
',但通常我会发现在列区域外有一个页眉和页脚,因此将它放在包装器中可以更容易地处理。 – 2011-03-21 17:31:53您需要在中心div上设置边距以保留其他两个边距。
这里是一个的jsfiddle:http://jsfiddle.net/pfxxL/
#left {
width: 100px;
position: fixed;
top: 0;
left: 0;
background: red;
}
#right {
width: 100px;
position: fixed;
top: 0;
right: 0;
background: blue;
}
#center {
margin-left: 100px;
margin-right: 100px;
height: 750px;
background: green;
}
<div id="left">
left left<br/>
left left<br/>
left left<br/>
</div>
<div id="center">
center
</div>
<div id="right">
right right<br/>
right right<br/>
right right<br/>
</div>
TKS乌尔法工作太.. – nuttynibbles 2011-03-21 15:17:57
我想我是第一个回答你的问题,说实话。但是,如果你发现T.斯通的回答更适合你的情况,那么他的回答会更好。 – Bazzz 2011-04-07 19:06:00
- 1. CSS固定左列
- 2. 用css左右固定图像位置
- 3. 两列CSS - 右列固定宽度,左列可变
- 4. 左列固定和右列液体的CSS布局?
- 5. CSS固定左边,流体右边,居中固定宽度
- 6. 动态左和固定右列宽div使用css
- 7. 两个固定div - 左右
- 8. Bootstrap固定左下拉右
- 9. CSS三列布局,有左列流体,居中和固定中间列,固定右列
- 10. 保留左列固定与CSS
- 11. CSS定位 - 修复中心 - 固定的左和固定右元素
- 12. CSS灵活布局:灵活的左列和变量固定的右列
- 13. 在固定容器内固定左列和弯曲右列的CSS3布局
- 14. 的CSS设置左固定和右流体布局
- 15. 如何创建固定菜单(链接从右到左) - HTML&CSS
- 16. 使用css左右浮动固定位置
- 17. 固定面板底座左右
- 18. 左右CSS余量
- 19. css轮廓左右
- 20. CSS - 阴影左右
- 21. 页脚3列,右和左固定,中心流体最大化
- 22. 固定宽度左侧栏,可变宽度的右列
- 23. 固定宽度中心,动态左右背景图像列
- 24. 两列分区布局:左=流体,右=固定和可滚动
- 25. 三列布局...左侧(固定像素),中间(50%),右侧(50%)
- 26. Bootstrap4 - 2列:左滚动,右固定映射
- 27. 固定右列和最小的左侧栏
- 28. CSS - 从左到右排列div
- 29. 左/ jQuery的CSS向右阵列
- 30. CSS:左右定位的过渡
请给一些代码 – sandeep 2011-03-21 14:27:41