css杂记

（一）、div的并排和自适应

1. 左边div设置float：left，然后设置固定宽度w，右边margin-left：w

   *.wrap{
   	            width:1000px;
   	            height:400px;
   	            border:1px solid red;
   	        }
   	        .left{
   	            float:left;
   	            width:200px;
   	            border:1px solid red;
   	            height:100%;
   	            background:gray;
   	        }
   	        .right{
   	            height:100%;
   	            border:1px solid blue;
   	            width:auto;
   	            background:green;
   	            margin-left:200px;
   	        }*
   

2. 使用cal函数

    *.wrap{
               width:1000px;height:400px;border:1px solid red;
           }
           .left{
               width:200px;height:100%;background:gray;
               float:left;
           }
           .right{
               height:100%;background:green;
               float:right;
               width:calc(100% - 200px);*
   

3. 使用flex布局实现

    *.wrap{
            width:1000px;
            height:400px;
            border:1px solid red;
            display:flex;         /*flex布局*/
        }
        .left{
            width:200px;
            height:100%;
            background:gray;
            flex:none;
        }
        .right{
            height:100%;
            background:green;
            flex:1;        /*flex布局*/
        }*
   

（二）、div内元素的有序排列，可以使用表格布局来平分：

                <div class="Row">
				    <div class="Column">C1</div>
				    <div class="Column">C2</div>
				    <div class="Column">C3</div>
				</div>
				
			

               .Row
				{
				    display: table;
				    width: 100%; /*Optional*/
				    table-layout: fixed; /*Optional*/
				    border-spacing: 10px; /*Optional*/
				}
				.Column
				{
				    display: table-cell;
				    background-color: red; /*Optional*/
				}