CSS重要属性之float学习心得(分享)

                <div class="left">margin-right</div>  
            </div>  
            <div class="right">左浮动+固定宽度+margin-left负值</div>  
        </div>  

CSS Code复制内容到剪贴板

.container {   
  max-width: 90%;   
  margin: 0 auto;   
}   
.container .rightright {   
  float: left;   
  width: 200px;   
  height: 200px;   
  background-color: lightpink;   
  margin-left: -200px;   
  height: 300px;   
}   
.container .left {   
  background-color: lightyellow;   
  margin-right: 200px;   
  height: 300px;   
  text-align: center;   
}  

6.4：智能布局

所谓智能布局，就是两栏都不需要设置宽度，宽度随内容自适应。

XML/HTML Code复制内容到剪贴板

<div class="container">  
            <div class="left">  
                float+margin-right+自适应宽度   
            </div>  
            <div class="right">  
                display:table-cell  —IE8+;   
                display:inline-block   —IE7+;   
                自适应宽度   
            </div>  
        </div>  

CSS Code复制内容到剪贴板

.container {   
  max-width: 90%;   
  margin: 0 auto;   
}   
.container .left {   
  float: left;