CSS布局之品字布局
2015-08-16 10:41
351 查看
最近有同学面试被问到关于品字布局的问题。虽然我觉得这种布局确实比较难看,应该也不会用到,但是既然有人问到,我还是自己尝试写了一下品字布局。其实很简单。
先看效果:
第一种:
第二种:
第一种:
其实实现方法很简单,基本思路:
(1)三块高宽是确定的;
(2)上面那块用margin: 0 auto;居中;
(3)下面两块用float或者inline-block不换行;
(4)用margin调整位置使他们居中。
inline方法代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 100px; width: 100px; background-color: #FF0000; border: solid 1px #000000; } .d1{ margin: 0 auto; } .d3{ display: inline-block; margin-left: -200px; } .d2{ display: inline-block; margin-left: 50%; } </style> <body> <div class="d1">上</div><!-- --><div class="d2">右</div><!-- --><div class="d3">左</div> </body> </html>
这里首先用margin-left: 50%,让下面两块的左侧到中间位置。然后再对右下角那块用margin-left,值是负的两倍宽度。就可以把它移动到左下角。因此第二个div是右下的,第三个是左下的,需要换一下。
还有一个小技巧,使用inline-block会有小的间隙,可以使用去除inline-block元素间间距的N种方法来解决。
float方式:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 100px; width: 100px; background-color: #FF0000; border: solid 1px #000000; } .d1{ margin: 0 auto; } .d3{ float: left; margin-left: -200px; } .d2{ float: left; margin-left: 50%; } </style> <body> <div class="d1">上</div> <div class="d2">右</div> <div class="d3">左</div> </body> </html>
和inline-block方式大同小异,就不再赘述。
还有全屏的品字布局,就更加简单,基本思路是上面的div宽100%,下面的两个div分别宽50%,然后用float或者inline使其不换行即可。
这里贴出一种方法:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 300px; } .d1{ width: 100%; height: 300px; background-color: #FF0000; } .d3{ float: left; width: 50%; background-color: #0099FF; } .d2{ float: left; width: 50%; background-color: #4eff00; } </style> <body> <div class="d1">上</div> <div class="d2">右</div> <div class="d3">左</div> </body> </html>
相关文章推荐
- Div+CSS布局入门教程
- Div+CSS布局入门教程(五)
- [轉]CSS网站布局-译自CSS禅意花园
- CSS中的圣杯布局与双飞翼布局
- 精通 CSS+DIV 网页样式与布局 104
- CSS.DIV网页样式与布局总结
- 慕课网《如何用CSS进行网页布局》视频学习笔记
- CSS中的绝对布局
- 一个好例子:DIV+CSS布局-固定页面开度布局
- Equal Height Columns --DIV+CSS布局中自适应高度的解决方法
- css实现网页布局随滚轮变化响应移动
- 认识css布局模式(流动模式下的块状元素和内联元素)
- JS+CSS实现左中右3栏布局先显示中栏内容
- CSS + DIV 经典布局,DIV统一自适应高度
- CSS页面布局技巧(三)
- CSS 高级布局技巧
- HTML布局之CSS
- 前端总结·基础篇·CSS(一)布局
- 简单CSS 布局
- div+css布局优化中的整体布局