Heim >Web-Frontend >HTML-Tutorial >CSS布局之品字布局_html/css_WEB-ITnose
CSS布局之品字布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:401147Durchsuche
最近有同学面试被问到关于品字布局的问题。虽然我觉得这种布局确实比较难看，应该也不会用到，但是既然有人问到，我还是自己尝试写了一下品字布局。其实很简单。
先看效果：
第一种：
第二种：
第一种：
其实实现方法很简单，基本思路：
（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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：div+css的前端工程师的价值体现在哪些方面？_html/css_WEB-ITnoseNächster Artikel：html中DTD使用小结_html/css_WEB-ITnose