css常见布局

 三列等高布局

css1  table-cell

#container{    
            width:100%;
            background: #ccc;
        }
        #col1 {
            display:table-cell;  
            background:red;   
        }
        #col2 {
               display:table-cell;
            height:2000px;
            background:yellow;   
        }
        #col3 {
            display:table-cell;
            background:green;   
        }

 

css2  负margin抵消padding

#container {
    overflow:hidden;
    width:100%;
    background:#ccc;
}
#col1 {
    float:left;
    width:30%;
    background:red;
    padding-bottom:200px;
    margin-bottom:-2000px;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
    padding-bottom:200px;
    margin-bottom:-2000px;
}
#col3 {
    float:left;
    width:30%;
    background:green;
    padding-bottom:200px;
    margin-bottom:-2000px;
} 

 

HTML

<div id="container">
        <div id="col1">Column 1第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
        <div id="col2">Column 2第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列</div>
        <div id="col3">Column 3第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列第三列</div>
    </div>

 

 

三列等宽且等高 

css

#container{
            width:600px;
            display:flex;
            background: #ccc;
        }
        #col1 {
              flex:1;
            background:red;  
            
        }
        #col2 {       
            flex:1;
            background:yellow;   
        }
        #col3{
            flex:1;
            background:blue;
        }

html:

<div    id="container">
        <div id="col1">Column 1第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
        <div id="col2">一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
         <div id="col3">Column 1第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
</div>

 

 

 

两列等高布局

有个同学问我"两栏等高布局"这个问题。当时我以为只是浮动过去而已，于是没多想就说这不就是浮动嘛。
然后他问，那怎么等高呢？我当时就混乱了，原来这题是在考浮动等高！于是他跟我说让我去网上搜一搜。这样的布局非常经典，一下就搜出来了：

给两个元素用padding来填充，然后用margin来消除padding带来的影响，最后给父元素加一个overflow:hidden;就行了。

html

<div class="container">
            <div class="left">我是左边</div>
            <div class="right">我是右边现在我的高度比左边的高度要高哦。啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</div>

css

.container{
                overflow:hidden;
                width: 100%;
                border: 3px solid #00c;
              }
.left{
                width: 30%;    
                float: left;
                background: #b0b0b0;
                padding-bottom: 2000px;
                margin-bottom: -2000px;
      }
.right{
                margin-left:30%;      //width:70%
                background: #6cc;
                padding-bottom: 2000px;
                margin-bottom: -2000px;
        }

 

未定高父元素的高度是这么计算的：最高的内容的高度！那父元素的里面都是浮动元素，高度怎么计算呢？这里由于父元素用了overflow:hidden;触发了bfc或者haslayout，所以浮动元素的高度也应该被计算，同时，也把超出父元素的那一部分截掉了。刚好，两栏并列等高布局就出来了！

具体的实践过程中可以把margin-bottom和padding-bottom的值设大一些，要保证任意两栏的高度差不小于你设置的值。

 

 

 

 

一列固定宽，一列自适应

法1 左边float 右边margin-left    

法2 左边float，右边overflow:hidden  触发bfc

法3 左边position:absolute 右边margin－left或者触发bfc

 html

<div id="col1">Column 1第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
        <div id="col2">Column 2第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列第二列</div>

css

        #col1 {
            width:30%;  
            background:red;  
            float:left; 
        }
        #col2 {
               
            overflow: hidden;
            background:yellow;   
        }