CSS布局之品字布局_html/css_WEB-ITnose

最近有同学面试被问到关于品字布局的问题。虽然我觉得这种布局确实比较难看，应该也不会用到，但是既然有人问到，我还是自己尝试写了一下品字布局。其实很简单。

先看效果：

第一种：

第二种：

第一种：

其实实现方法很简单，基本思路：

（1）三块高宽是确定的；

（2）上面那块用margin: 0 auto;居中；

（3）下面两块用float或者inline-block不换行；

（4）用margin调整位置使他们居中。

inline方法代码如下：

                                     *{            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%; }                  
上

      
查看更多关于CSS布局之品字布局_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109081