一、两列宽度是窗口宽度的百分比
html:
<html>
<head>
<title>两列</title>
<link rel = "stylesheet" type="text/css" href = "layout.css">
</head>
<body>
<div id ="left"></div>
<div id="right"></div>
</body>
</html>
layout.css:
#left{
background-color:#cccccc;
border:2px solid#333333;
width:20%;
height:500px;
float:left;
}
#right{
background-color:lightgreen;
border:2px solid#333333;
width:70%;
height:500px;
float:right;
}
二、第一列宽度固定，第二列不舍宽度
第一列用float：left；第二列不要设置width。
否则，第二列将直接从第一列开头开始。并且和第一列重合的部分会被第一列覆盖。
html:
<html>
<head>
<title>div</title>
<link rel = "stylesheet" type="text/css" href = "layout.css">
</head>
<body>
<div id ="a">a</div>
<div id="b">b</div>
</body>
</html>
layout.css
#a{
background-color:#cccccc;
border:2px solid#333333;
width:100px;
height:100px;
float:left;
}
#b{
background-color:lightgreen;
border:2px solid#333333;
height:100px;
margin-left:200px;
}
网友评论