布局之不定宽与自适应

不定宽:指可设置任意宽度,或宽度有内容决定。

自适应:无论其他元素怎么变,它都不用改。

命题:设置不定宽与自适应

<div class="parent">
     <div class="left">
          <p>left</p>
    </div>
    <div class="right">
          <p>right</p>
          <p>right</p>
    </div>
</div>

方案1:float+overflow

.left{
   float:left;
   width:100px;                 //.left p{width:200px;}
margin-right:20px; } .right{ overflow:hidden; }

方案2:table

//布局优先
.parent{ display:table; width:100%; //table默认宽度以内容为准,每列的宽度之和为table总宽 table-layout:fixed; //提高渲染速度,实现了布局优先 } .left,.right{ display:table-cell; //设为单元格 不能设margin } .left{ width: 100 px; padding-right:20px; }
//内容优先
.parent{ display:table; width:100%; //table默认宽度以内容为准,每列的宽度之和为table总宽 } .left,.right{ display:table-cell; //设为单元格 不能设margin } .left{ width:0.1%; padding-right:20px; }
.left p{
width:200px;
}
 

方案3:flex

.parent{
    display:flex;
}
.left{
    width: 100 px;          //.left p{width:200px;}
    margin-right:20px;
}
.right{
    flex:1;                 //相当于flex:1 1 0;   剩余空间都给了right
}

附加:多列不定宽与自适应

    把不定宽的样式设为一致即可

 

posted @ 2015-07-01 22:34  3408GoGoGo  阅读(298)  评论(0编辑  收藏  举报