圣杯布局两种实现方式

圣杯布局：两侧宽度固定，中间宽度自适应的三栏布局

第一种利用flex布局
中间flex：1，两边flex：0 0 200px，弹性盒子顺序可以用order

    <style>
        #container {
            display: flex;
        }
        #center {
            flex: 1;
        }
        #left {
            flex: 0 0 200px;
            /* 一：放大属性
               二：缩小属性
               三：项目的长度：可以是px ，等各种单位 */
        }
        #right {
            flex: 0 0 150px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="left" class="column">02</div>
        <div id="center" class="column">2</div>
        <div id="right" class="column">2</div>
    </div>
</body>

第二种利用定位
中间自适应和margin-left（-right）留出空间，两边定位过去，下面的盒子要清除浮动

    <style>
        body {
            min-width: 550px;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        
        #container .column {
            float: left;
        }
        
        #center {
            background-color: #ccc;
            width: 100%;
        }
        
        #left {
            background-color: #000;
            width: 200px;
            position: absolute;
            left: 0;
            right: 200px;
        }
        
        #right {
            background-color: red;
            width: 150px;
            position: absolute;
            right: 0;
        }
        
        #footer {
            clear: both;
        }
	//清除浮动
    </style>
</head>

<body>
    <div id="header">111</div>
    <div id="container">
        <div id="center" class="column">2</div>
        <div id="left" class="column">2</div>
        <div id="right" class="column">2</div>
    </div>
    <div id="footer">333</div>
</body>

圣杯布局两种实现方式

猜你喜欢