浅谈布局详情

两列布局：一列宽度固定，另一列宽度自适应。两列高度相等。

布局结构为：

  <div id="two-columns">
        <div id="left"></div>
        <div id="right"></div>
  </div>

1 ： float 和 margin-letf/ margin-right 一起使用

       #two-columns{ 
            width: 1000px;
            height: 1000px;
         }
        #left{
            float: left;
            height: 100%;
            width: 100px;
            background-color: #c66;
        }
        #right{
            margin-left: 100px;
            height: 100%;
            background-color: #66f;
        }

2 overflow：hidden 形成BFC布局。

     #two-columns{ 
            width: 1000px;
            height: 1000px;
         }
        #left{
            float: left;
            height: 100%;
            width: 100px;
            background-color: #c66;
        }
        #right{
            overflow: hidden;
            height: 100%;
            background-color: #66f;
        }

3 利用flex:

    #two-columns{ 
            display: flex;
            width: 1000px;
            height: 1000px;
         }
        #left{
            width: 100px;
            background-color: #c66;
        }
        #right{
            flex: 1;
            background-color: #66f;
        }

三列布局：

经典的三列布局由左中右三列组成，其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。以下以左中列宽度固定和右列宽度自适应为例，反之同理。整体的实现原理与上述两列布局一致。

  <div id="two-columns">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>

实现方式一： overflow + hidden:

     #two-columns {
            width: 400px;
            height: 400px;
        }
        #left {
                float: left;
                width: 50px;
                height: 100%;
                background-color: #f66;
            }
        #center {
                float: left;
                width: 100px;
                height: 100%;
                background-color: #66f;
            }
        #right {
                overflow: hidden;
                height: 100%;
                background-color: #3c9;
            }