基础系列：布局解决方案【不定宽与自适应】

思路一float+overflow

  1. 左边不设置div宽度，根据内容自适应
  2. 右边设置overflow:hidden; 不受左边的div的影响
  3. IE6下 不兼容 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
         .left{
             float: left;
             margin-right: 20px;
         }
         .right{
             overflow: hidden;
         }
         .left p{width: 200px;}
    </style>
</head>
<body>
    
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
    
    
</body>
</html>

思路二table

  1. 左边div设置宽度为0.1% 考虑在 IE8下的兼容性。不兼容IE67;
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
         .parent{
             display: table;
             width: 100%;
         }
         .left,.right{
             display: table-cell;
             background-color: #9966CC;
         }
         .left{
             width: 0.1%;
             padding-right:20px; 
            background-color: #996633;
         }
         
         .left p{width: 200px;}
    </style>
</head>
<body>
    
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
    
    
</body>
</html>

 

思路三flex

  1. 左边的宽度会随着内容宽度而改变
  2. flex的兼容性
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
         .parent{
             display: flex;
         }
         .left{             
             margin-right: 20px;
             background-color: #9966CC;
         }
         .left p{ 
             width: 300px;
         }    
         
         .right{
             flex:1;
         }
    </style>
</head>
<body>
    
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
    
    
</body>
</html>

 

posted @ 2015-08-02 21:10  哪有公园可以住的呀  阅读(184)  评论(0)    收藏  举报