CSS布局之品字布局_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:38:401145검색
最近有同学面试被问到关于品字布局的问题。虽然我觉得这种布局确实比较难看，应该也不会用到，但是既然有人问到，我还是自己尝试写了一下品字布局。其实很简单。
先看效果：
第一种：
第二种：
第一种：
其实实现方法很简单，基本思路：
（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> 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.