双飞燕布局

作者: Vijay_ | 来源:发表于2017-12-24 02:31 被阅读22次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .containerx{
            float: left;
        }
        #main-wrap{
            margin:0 190px 0 190px;
        }
        .main{
            background: black;
            padding: 0 190px;
            /*box-sizing: border-box;*/
            color: white;
            width: 100%;
            height: 200px;
        }
        #leftwrap{
            width: 190px;
            margin-left: -100%;
            background: gold;
            height: 200px;

        }
        #rightwrap{
            width: 190px;
            margin-left: -190px;
            background: gold;
            height: 200px;

        }
    </style>
</head>
<body>
<!--让main占百分百宽度把旁边两个容器挤下去，然后用margin-left拉上来
然后把main-wrap的左右外边距等同两遍容器的宽度 空开位置-->
<div class="containerx main" >
    <div  id="main-wrap">
        #main
    </div>
</div>
<div class="containerx" id="leftwrap">
    #left
</div>
<div class="containerx" id="rightwrap">
    #right
</div>
</body>
</html>