CSS布局之品字布局_html/css_WEB-ITnose-html tutorial-php.cn

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

WBOY

Lepaskan： 2016-06-24 11:38:40

asal

1142 orang telah melayarinya

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

先看效果：

第一种：

第二种：

第一种：

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

（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>

Salin selepas log masuk

这里首先用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>

Salin selepas log masuk

和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>

Salin selepas log masuk