css+div上下左右自适应居中
2015-08-09 15:43
288 查看
主要记录自己日常积累的布局相关的东西,持续更新中。
1.登录框上下左右自适应居中
以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上查询了一下发现了一种比较的实现方法。
原理就是用position:absolute,然后用left:50%,top:50%,现在登录表单左侧直角是在页面的中间了,但是登录框本身还有宽度和高度,所以我们再用margin-left:-登录框宽度,margin-top:-登录框高度,就可以让登录框显示在页面的正中间了。
很多问题的解决方法都不止一种,还是要多学习多交流啊。
2.左右布局,左侧固定宽度,右侧自适应宽度
原理就是左侧div固定宽度+float,然后右侧的div设置左间隔左侧div宽度的距离就可以了(margin-left:左侧div的宽度)
1.登录框上下左右自适应居中
以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上查询了一下发现了一种比较的实现方法。
原理就是用position:absolute,然后用left:50%,top:50%,现在登录表单左侧直角是在页面的中间了,但是登录框本身还有宽度和高度,所以我们再用margin-left:-登录框宽度,margin-top:-登录框高度,就可以让登录框显示在页面的正中间了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>登录框自适应居中</title> <style> #LoginContainer { position: absolute; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #ccc; } </style> </head> <body> <div id="LoginContainer"> 这是登录框 </div> </body> </html>
很多问题的解决方法都不止一种,还是要多学习多交流啊。
2.左右布局,左侧固定宽度,右侧自适应宽度
原理就是左侧div固定宽度+float,然后右侧的div设置左间隔左侧div宽度的距离就可以了(margin-left:左侧div的宽度)
<style type="text/css"> html, body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; } .container { height: 100%; border: 1px solid #ccc; min-width: 600px; } .container .west { border-right: 1px solid #ccc; height: 100%; width: 200px; float: left; } .container .content { height: 100%; margin-left: 200px; } </style> <div class="container"> <div class="west">west</div> <div class="content">content</div> </div>
相关文章推荐
- 第二天(CSS 选择器)
- CSS书写规范及顺序
- Emmet:HTML/CSS代码快速编写技巧
- Stream的Dropzonejs样式演示
- HTML学习笔记(4)——CSS块级元素与盒模型
- 选择tableView的某一行时,马上取消当前选中行(选中样式不保留)
- 新版CSS手册
- JS+css3实现图片画廊效果总结
- js与CSS的调用
- CSS的使用
- CSS从大图中抠取小图完整教程(background-position应用)
- CSS学习笔记----(三)
- HTML文档中应用css样式的方法总结
- jsp网页无法加载css解决方法
- css基础与选择器——精通css学习笔记(一)
- 理解css中的line-height
- 3.6html学习笔记之样式选择
- 纯CSS实现提示框小三角
- HTML/CSS 清浮动的方法
- HTML/CSS 块、内嵌、浮动、定位元素的特点对比