三列布局两列布局

最新推荐文章于 2022-09-03 15:58:30 发布

sysutangxiaoxi

最新推荐文章于 2022-09-03 15:58:30 发布

阅读量501

点赞数

本文链接：https://blog.csdn.net/u014687259/article/details/23593631

版权

三列中间自适应布局：

<article class="clearfix">
    <aside id="left">
    </aside>
 
        <div id="centerwrap">
           <div id="center">
    
    
           </div>
        </div>
 
        <aside id="right">
        </aside>
</article>

.clearfix:after{
    height:0;
    content:".";
    display: block;
    visibility:hidden;
    clear:both;
}
#centerwrap{
    width:100%;
    float:left;
    margin-left:-200px;
    margin-right:-200px;
}
#center{
    margin-right:200px;
    margin-left:200px;
    padding:0 10px;
}
aside{
    width:200px;
}
aside#left{
    float:left;
}
aside#right{
    float:right;
}

两列布局左自适应宽度：

<article class="clearfix">
        <div id="centerwrap">
           <div id="center">  
           </div>
        </div>
  
        <aside>
        </aside>
</article>

.clearfix:after{
    height:0;
    content:".";
    display: block;
    visibility:hidden;
    clear:both;
}
#centerwrap{
    width:100%;
    float:left;
    margin-right:-200px;
}
#center{
    margin-right:200px;
    padding:0 10px;
}
aside{
    width:200px;
    float: right;
}