网页布局——左侧固定,右侧自适应

2016/12/23 8:40:08   阅读:1711    发布者:1711

第一种方法:

<!DOCTYPE> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style> 
.one { 
position: absolute; 
height: 200px; 
width: 300px; 
background-color: blue; 
} 
.two { 
height: 200px; 
margin-left: 300px; 
background-color: red; 
} 
</style> 
</head> 
<body> 
<div class="one"></div> 
<div class="two">第一种方法</div> 
</body> 
</html>

 

第二种方法:

<!DOCTYPE> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style> 
.one { 
float:left; 
height: 200px; 
width: 300px; 
background-color: blue; 
} 
.two { 
overflow: auto; 
height: 200px; 
background-color: red; 
} 
</style> 
</head> 
<body> 
<div class="one"></div> 
<div class="two">第二种方法</div> 
</body> 
</html>