扔掉float进行立体式多列布局

最新推荐文章于 2021-08-03 20:41:47 发布

chiyingcheng7195

最新推荐文章于 2021-08-03 20:41:47 发布

阅读量103

点赞数

原文链接：https://my.oschina.net/jjfly/blog/132174

版权

先来看一下这样的一个布局:

以上布局是典型的一行多列的布局开式。在之前我们要通过div来实现这样的布局，用的最多的就是利用float来进行处理。

在这里来说下别外一种处理方式。就是通过使用positions与z-index与margin: 0 0 0 auto来进行布局。

第一步：定义一个最外层的容器div。

<div></div>

式样：

.outside {
            width: 960px;
            min-width: 960px;
            background-color: orange;
            margin: auto;
            position: relative;
            top: 100px;
            height: 200px;
        }

第二步：在容器div中定义一第列的div。

<div class=”outside”>

<div class=”td_01”> </div>

<div>

css：

.td_01 {
           position: absolute;
           top: 0;
           height: 100px;
           width: 200px;
           background-color: black;
           z-index: 3;
       }
在这里要注意的是内部的这个div将position设置为了absolute。意味着这个div将脱离整个文档流，也就是说不会再受到外部的容器div的约束了。如果想要使其继续受到容器div的约束，办法就是在容器div的样式中将position设为relative或者fixed。在这里设置为relative。

第三步：定义第二列的div

在这一步时不仅是要写一个div，而是要另加一个div来将第三列的div包含进行。让第三列的div在这个div中右对齐。代码如下：

css:.td_02 {
            width: 400px;
            background-color: blue;
            z-index: 2;
            position: absolute;
            top: 0;
            height: 100px;
        }

.td_02 div {
            width: 200px;
            margin: 0 0 0 auto;
            background-color: red;
            height: 100%;
        }

看以上代码的css代码，我们将cellContainer来进行absolute定位，让它位于容器div的内从左边开始。其中注意width的值刚好是两个列的宽度总和。cellDiv的样式中width是列的宽度，这里最主要一个是margin:0 0 0 auto;这样设置后，就将这个div相对于cellContainer进行了右对齐。

因为第一列与第二列都是absolute的，所以会出现第二列将第一列覆盖的情况所以这里将第一列的z-index设置的比第二列要高。这样就可以了。第三列同样使用第二列的写法之不过width是列宽的3倍，z-index比第二列要小。这样一级级的排下去。可以实现N列布局。

之所以说是立体式的就是因为z-index。各列是一层叠一层的。就像在垒方块一样。

整个的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>立体式多列布局</title>
    <style type="text/css">
        .outside {
            width: 960px;
            min-width: 960px;
            background-color: orange;
            margin: auto;
            position: relative;
            top: 100px;
            height: 200px;
        }
        .tdContainer {

        }
        .td_01 {
            width: 200px;
            background-color: black;
            z-index: 3;
            position: absolute;
            top: 0;
            height: 100px;
        }
        .td_02 {
            width: 400px;
            background-color: blue;
            z-index: 2;
            position: absolute;
            top: 0;
            height: 100px;
        }
        .td_03 {
            width: 600px;
            background-color: blue;
            z-index: 1;
            position: absolute;
            top: 0;
            height: 100px;
        }
        .tdContainer div {
            width: 200px;
            margin: 0 0 0 auto;
            background-color: red;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="outside">
         
        <div class="tdContainer td_01">
                 
        </div>
        <div class="tdContainer td_02">
            <div>
                 
            </div>
        </div>
        <div class="tdContainer td_03">
            <div style="background-color: blueviolet;">
                 
            </div>
        </div>
    </div>