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

             <div class="right">右边自适应宽度+margin-left</div>  
         </div>  

CSS Code复制内容到剪贴板

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

6.2：DOM与显示位置不同的单侧固定

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

<div class="container">  
             <div class="right">右浮动+固定宽度</div>  
             <div class="left">左边自适应宽度+margin-right</div>  
         </div>  

CSS Code复制内容到剪贴板

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

也就是说，html元素与显示在页面上的元素位置不相同。

　　6.3：DOM与显示位置相同的单侧固定

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

<div class="container">  
            <div class="left-content">  
                <!– 左浮动+width100% –>