面试题：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。

题目要求：要求：允许增加额外的DOM节点，但不能修改现有节点顺序。
DOM结构：

<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

方法一：圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            padding: 0 300px 0 200px;
        }
        .left,.right,.main{
            position: relative;
            float: left;
            min-height: 200px;
        }
        .left{
            background-color: red;
            width: 200px;
            margin-left: -100%;
            left: -200px;
        }
        .right{
            background-color: green;
            width: 300px;
            margin-left: -300px;
            right: -300px;
        }
        .main{
            background-color: purple;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    　　<div class="main">main</div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
</div>
</body>
</html>

方法二：双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            margin: 0 300px 0 200px;
        }
        .main,.left,.right{
            float: left;
            min-height: 200px;
        }
        .left{
            background-color: red;
            width: 200px;
            margin-left: -100%;
        }
        .main{
            background-color: purple;
            width: 100%;
        }
        .right{
            background-color: green;
            width: 300px;
            margin-left: -300px;
        }
    </style>
</head>
<body>
<div class="container">
    　　<div class="main">
            <div class="content">main</div>
        </div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
</div>
</body>
</html>

方法三：定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位实现中间自适应两端固定布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .main,.right,.left{
            top: 0;
            min-height: 300px;
        }
        .main{
            position: relative;
            background-color: red;
            margin: 0 300px 0 200px;
        }
        .left{
            position: absolute;
            width: 200px;
            background-color: purple;
            left: 0;
        }
        .right{
            position: absolute;
            width: 300px;
            right: 0;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="container">
    　　<div class="main">main</div>
    　  <div class="left">left</div>
    　　<div class="right">right</div>
</div>
</body>
</html>

方法四：弹性盒子布局（Flex Box）
Flex Box学习地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex Box实现中间自适应两端固定布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: -webkit-flex;
            display: flex;
            min-height: 300px;
            font-size: 0;
            -webkit-text-size-adjust: none;
        }
        .main,.left,.right{
            font-size: 14px;
        }
        .main{
            flex-grow: 1;
            background-color: purple;
        }
        .left{
            background-color: green;
            order: -1;
            width: 200px;
        }
        .right{
            background-color: red;
            width: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    　　<div class="main">main</div>
    　  <div class="left">left</div>
    　　<div class="right">right</div>
</div>
</body>
</html>

面试题：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。

猜你喜欢