前端开发者vscode搭建前端开发|firefox 前端开发插件|合肥 前端开发 招聘信息
三列布局：实现左右两边固定宽度，中间部分页面自适应（position必须与margin配合使用，如果margin与float配合用的话会出问题）
html 代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>三列布局</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold
}
div {
text-align: center;
line-height: 50px
}
.left {
width: 240px;
height: 600px;
background: #ccc;
position: absolute;
left: 0;
top: 0
}
.main {
height: 600px;
margin: 0 240px;
background: #9CF
}
.right {
height: 600px;
width: 240px;
position: absolute;
top: 0;
right: 0;
background: #FCC;
}
</style>
</head>
<body>
<div class=”left”>left</div>
<div class=”main”>main</div>
<div class=”right”>right</div>
</body>
</html>
如果margin与float配合使用的话，则达不到预期的效果，由效果分析代码的问题就迎刃而解了~~~
html 代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>三列布局</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold
}
div {
text-align: center;
line-height: 50px
}
.left {
width: 240px;
height: 600px;
background: #ccc;
float: left;
}
.main {
height: 600px;
margin: 0 240px;
background: #9CF
}
.right {
height: 600px;
width: 240px;
float: right;
background: #FCC;
}
</style>
</head>
<body>
<div class=”left”>left</div>
<div class=”main”>main</div>
<div class=”right”>right</div>
</body>
</html>
前端面试移动端开发|x前端开发框架|搭建前端自动化开发
» 本文来自：前端开发者 » 《前端页面布局时使用float,margin,position的细节》
» 本文链接地址：https://www.rokub.com/4985.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册