圣杯布局

今天去阿里面试的时候被问到这个了。。。当时表示没听说过，然后让面试官给我解释了一下，回来继续补习。

首先上代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
.main {
    background:#D6D6D6;
}

.left {
    background:#E79F6D;
}

.right {
    background:#7BD;
}

/* core layout css */
.main {
    float:left;
    width:100%;
}

.left {
    float:left;
    width:190px;
    margin-left:-100%;

}

.right {
    float:left;
    width:230px;
    margin-left:-230px;

}
.in{margin:0 230px 0 190px}

</style>

    </head>
<body>
<div id="bd">
              <div class="main"><div class="in">test11111111111</div></div>
              <div class="left">test11111111111</div>
              <div class="right">test11111111111</div>
         </div>
</body>
</html>

核心思想是利用margin负边距进行挤呀挤：

负边距 margin-left为负值，且两个元素不在一行的时候（可以用元素float:left,100%实现）margin-left可以吃掉兄弟元素的margin.