CSS布局:三列布局自适应问题
2015-07-23 09:30
411 查看
一、列布局,左右宽度固定,中间一列随浏览器窗口变化宽度
首先考到了定位中的方法中的文档流和浮动流,然后考到了文档流和浮动流默认宽度和显示层级(我一般理解成index这种含义,或者画布中的上下层一样,浮动流会居于上层,文档流会居于下层,因此浮动流区块可能会部分遮住文档流区块,但是文档流在下面是依然存在的,只是被遮住了而已)。
首先写出两个div,让第一个div左浮动,第二个div右浮动,第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位,所以会脱离文档流,并且第一个div会浮动到父容器区域的左边,第二个div会浮动到父容器的右边,在一排中显示。这时候第三个div由于是文档流定位的,且如果不设宽度或默认成100%,会随着浏览器窗口变化宽度的,因此前面两个浮动流区块会部分遮住此文档流区块,这时只用对此区块设置左右margin即可。
二、三栏布局,中间栏固定宽度,左右两边自适应
首先考到了定位中的方法中的文档流和浮动流,然后考到了文档流和浮动流默认宽度和显示层级(我一般理解成index这种含义,或者画布中的上下层一样,浮动流会居于上层,文档流会居于下层,因此浮动流区块可能会部分遮住文档流区块,但是文档流在下面是依然存在的,只是被遮住了而已)。
首先写出两个div,让第一个div左浮动,第二个div右浮动,第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位,所以会脱离文档流,并且第一个div会浮动到父容器区域的左边,第二个div会浮动到父容器的右边,在一排中显示。这时候第三个div由于是文档流定位的,且如果不设宽度或默认成100%,会随着浏览器窗口变化宽度的,因此前面两个浮动流区块会部分遮住此文档流区块,这时只用对此区块设置左右margin即可。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type='text/css'> * { margin: 0; padding: 0; } #left { width: 100px; float: left; background: green; height: 300px; overflow: hidden; } #right { width: 100px; float: right; background: red; height: 300px; overflow: hidden; } #middle { margin-right: 110px; margin-left: 110px; height: 300px; background: #ccc; } </style> </head> <body> <div id="left"> </div> <div id="right"> </div> <div id="middle"> </div> </body> </html>
二、三栏布局,中间栏固定宽度,左右两边自适应
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS</title> <style type="text/css"> body{padding:0;margin:0;} div{ height:100%; } #mid { z-index:2; background-color:#eee; width:500px; margin-left:-250px; position:absolute; top:0; left:50%; } #left,#right { z-index:1; position:absolute; top:0; width:50%; } #left { left:0; } #left .container { margin-right:250px; background-color:#bbb; } #right { right:0; } #right .container { margin-left:250px; background-color:#bbb; } </style> </head> <body> <div id="mid"> mid 宽度固定 : 500px </div> <div id="left"> <div class="container"> left 宽度自适应 </div> </div> <div id="right"> <div class="container"> right 宽度自适应 </div> </div> </body> </html>
相关文章推荐
- 学习CSS(6)
- CSS 多浏览器兼容性问题及解决方案
- CSS+DIV简单布局
- css position
- 2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)
- 使用CSS样式表格式化XML文档
- CSS清除浮动大全共8种方法
- 来问项目-less文件的组织
- css3中变形与动画(一)
- 使用css实现圆角图形绘制
- CSS相对定位、绝对定位之我见
- CSS:选择器
- css3 transition 实现图片放大缩小
- css关系选择符
- 30个值得收藏的CSS代码片段
- 纯css切换左侧菜单
- 如何处理CSS3属性前缀
- 个人学习css的真实经验
- CSS中背景图片定位
- 常用css缩写