margin+absolute布局：右栏固定主内容自适应 demo
2024-07-02 01:47:17 224人阅读
margin+absolute布局：右栏固定主内容自适应 demo
<style>
#demo{width:80%;margin:auto;height:300px;}
#hd2,#ft2{height:50px;background-color:#aaa;}
#bd2{position:relative;margin:10px 0;}
#aside2{position:absolute;top:0;right:0;width:200px;background:#ccc;}
#main2{margin-right:210px;background-color:#aaa;}
#hd3,#ft3{height:50px;background-color:#aaa;}
#bd3{position:relative;margin:10px 0;}
#aside3{position:absolute;top:0;left:0;width:200px;background:#ccc;}
#main3{margin-left:210px;background-color:#aaa;}
#hd4,#ft4{height:50px;background-color:#aaa;}
#bd4{zoom:1;overflow:hidden;margin:10px 0;}
#aside4{float:left;width:200px;background:#ccc;}
#main4{margin-left:210px;background-color:#aaa;}
#bd5{
padding-left:210px;
}
#aside5{
float:left;
position:relative;
left:-210px;
width:200px;
margin-left:-100%;
background:red;
}
#main5{
float:left;
width:100%;
background:pink;
}
#hd5,#ft5{height:50px;background-color:#aaa;}
#hd6,#ft6{height:50px;background-color:#aaa;}
#bd6{zoom:1;overflow:hidden;margin:10px 0;padding-right:210px;}
#aside6{float:left;position:relative;right:-210px;width:200px;margin-left:-200px;background-color:#ccc;}
#main6{float:left;width:100%;background-color:#aaa;}
</style>margin+absolute布局：左栏固定主内容自适应 demo
margin+float布局：左栏固定主内容自适应 demo
float + 负margin 方式
圣杯布局之左栏固定主内容自适应
如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写博，我的支付宝
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：
投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
