您的位置：首页 > Web前端 > CSS

[css layout][06] three percentage columns

2013-11-11 20:10 351 查看


1.#wrapper宽度100%全部float向左

#wrapper {
width: 100%;
float: left;
}
#content {
margin-left: 50%;
}
#navigation {
float: left;
width: 25%;
margin-left: -75%;
}
#extra {
float: left;
width: 25%;
margin-left: -100%;
}
#footer {
clear: both;
}


2.#wrapper宽度100%全部float向右

#wrapper {
width: 100%;
float: right;
}
#content {
margin-left: 50%;
}
#navigation {
float: right;
width: 25%;
margin-right: -50%;
}
#extra {
float: right;
width: 25%;
margin-right: -25%;
}
#footer {
clear: both;
}


3.#wrapper宽度50%全部float向右

#wrapper {
width: 50%;
float: right;
}
#navigation {
float: right;
width: 25%;
}
#extra {
float: right;
width: 25%;
}
#footer {
clear: both;
}


4.#wrapper宽度50%全部float向左

#wrapper {
width: 50%;
float: left;
margin-right: -50%;
position: relative;
left: 50%;
}
#navigation {
float: left;
width: 25%;
margin-right: -25%;
position: relative;
left: 25%;
}
#extra {
float: left;
width: 25%;
}
#footer {
clear: both;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航