方法1：这个是从博客里找来的方法，使用float 布局
<!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>DIV+CSS实现两边固定宽度,中间自适应宽度</title>
<style>
.content{
width:100%;
height:800px;
background-color:blue;
}
#main{
width:540px;
float:left;
background:green;
}
#left,#right{
float:left;
margin:0 0 0 -271px;
width:50%;
}
.inner{
padding:20px;
}
#left .inner,
#right .inner{
margin:0 0 0 271px;
background:orange;
}
</style>
</head>
<body>
<div class="content">
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
</div>
</body>
</html>
2、使用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
header{
width:100%;
height:50px;
background-color:red;
}
.content{
display:flex;
display:-webkit-flex;
width:100%;
height:800px;
background-color:blue;
flex-direction:row;
flex-wrap:nowrap;
justify-content:space-round;
align-items:stretch;
}
.content div{
border:1px dotted white;
}
.content .left,.content .right{
width:auto;
height:auto;
flex-shrink:1;
flex-grow:1;
background:yellow;
}
.content .center{
flex-basis:700px;
flex-shrink:0;
flex-grow:0;
background:green;
}
footer{
width:100%;
height:20px;
background-color:red;
}
</style>
</head>
<body>
<header>header</header>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
