三列显示
2021-12-12 本文已影响0人
如雨随行2020
两列固定宽度，第三列居中显示
注：虽然css里面已经规定了body的margin和padding为0，但似乎body还是有margin-top：8px；
margin-left/margin-right:10px
html：
<html>
<head>
<title>两列</title>
<link rel = "stylesheet" type="text/css" href = "layout.css">
</head>
<body>
<div id ="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>
layout.css
#left{
background-color:#cccccc;
border:2px solid#333333;
width:100px;
height:500px;
position:absolute;
top:8px;left:0px;
}
#right{
background-color:lightgreen;
border:2px solid#333333;
width:100px;
height:500px;
position:absolute;
top:8px;right:0px;
}
#center {
background-color:red;
border:2px solid#333333;
height:500px;
margin-top:0px;
margin-left:96px;
margin-right:96px;
}
#body{margin:0px;padding:0px;}
ps：找到问题了，原来的css只对body进行处理，没有对html进行处理
#left{
background-color:#cccccc;
border:2px solid#333333;
width:100px;
height:500px;
position:absolute;
top:0px;left:0px;
}
#right{
background-color:lightgreen;
border:2px solid#333333;
width:100px;
height:500px;
position:absolute;
top:0px;right:0px;
}
#center {
background-color:red;
border:2px solid#333333;
height:500px;
margin-top:0px;
margin-left:104px;
margin-right:104px;
}
html,body{margin:0px;padding:0px;}
