圣杯布局

最新推荐文章于 2024-09-14 08:09:14 发布

梦jenny

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量467

点赞数

分类专栏：布局 CSS 文章标签：圣杯 css

CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

布局

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
        <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css 布局</title>

    <style type="text/css">
        *{
            margin:0;
            padding: 0;
            }

        #head{
            text-align: center;
            background-color: #CCCCFF;
        }
        #footer{
            text-align: center;
            background-color: #CCCCFF;
        }
        #container{
            padding: 0 230px  0 190px;
        }

        #center{

            background:rgba(0,0,37,0.5);
            width: 100%;
            float: left;
           height: 300px;
        }

        #left{

        width: 190px;
            float:left;
            background:rgba(219,83,37,0.5);
            margin-left: -100%;
            height: 300px;
            position: relative;
            left: -190px;
        }

        #right{

            width: 230px;
            float: left;
            background:rgba(255,255,0,0.5);
            margin-left: -230px;
              position: relative;
           right: -230px;
            height: 300px;
        }

        #footer{
            clear:  both;
            text-align: center;
        }


    </style>
</head>

<body>
<div id="page">
<div id="head">
    <h1>head</h1>
</div>

<div id="container">
    <div id="center" class="column">
        center
    </div>

    <div id="left" class="column">
        left
    </div>

    <div id="right" class="column">
        right
    </div>
</div>

<div id="footer">
    <h1>footer</h1>
</div>
</div>
</body>
</html>

一步步实现：

1、先排好各个DIV

2、在中间部分总共外套一个DIV，包括左右翼和中间内容

3、左右翼定宽，左右中各种浮动（这步就已经做好模型了），tooter清除浮动

4、由于浮动，会导致center,left,right排排站；

5、center由于是自适应，定义了浮动会宽度展现的尽可能的小，所以需要给center定一个宽度；自适应的话需要定百分比，所以就定width:100%；注意这里是center宽带100%；不是外面的大框container宽度100%；如果是外框100%，这个外框只需要套在center外面，而不用套在整个center left right外面

6、排排站后，需要把left移到左边，所有用margin-left :-100%

需要把right移到右边所以用margin-left:-230px (right的宽度)

7、这样子得到的结果是

实际上center和left、right都有重叠的部分，所以需要将center真正的摆到中间去

故将包含center left right 的大框container 左侧右侧各padding 190px (left宽度) 230px(right宽度)

8、

这样center是自适应了且左右预留了 190px和230px位置，but 左右翼位置不对了，所以需要用position :relative进行相对移动

9、左翼向左移 190px left:-190px

右翼向右移 230px right :-230px