这里实现得两栏布局是左边部分的宽度固定,右边部分的宽度自适应
其效果就如下图,在浏览器屏幕大小变化的过程中,左边块的大小是不变的,右边块的宽度是自适应的。
实现方法有以下几种:
1通过设置浮动实现。需要两个div实现,一个div设置浮动,并设置宽度,另一个div不用设置任何东西
如果要给右边块设置什么的话下面两种方法也行:
- (left左浮动并设置宽度right设置margin-left为left的宽度也能实现)
- (left设置左浮动并和宽度right,right设置over-flow:hidden也能实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局——float</title>
<style>
div{
height:300px;
}
.left{
width:200px;
background-color:gray;
float:left;
}
.main{
background-color:pink;
/* margin-left:200px; */
/* 或者overflow:hidden; */
}
</style>
</head>
<body>
<div class = &#