写一个左中右布局，左右宽度200，中间宽度自适应

====================第一种方法：绝对定位=======================

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
margin: 0;
width: 100%;
}

#left,
#right {
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
}

#left {
left: 0;
}

#right {
right: 0;
}

#center {
margin: 0 210px;
height: 200px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
</body>
</html>
 
效果：

 

 

====================第二种方法：浮动======================

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
margin: 0;
width: 100%;
}

#left,
#right {
width: 200px;
height: 200px;
background-color: #f00;
}

#left {
margin-right: 10px;
float: left;
}

#right {
margin-left: 10px;
float: right;
}

#center {
/*margin: 0 210px;*/
height: 200px;
background-color: #eee;
overflow: hidden;
}
</style>
</head>
<body>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
</body>
</html>

 

效果:与方法一相同
 
 

===================第三种方法：圣杯模式=======================

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
margin: 0;
width: 100%;
}

#wrap {
width: 100%;
height: 200px;
background-color: transparent;
float: left;
}

#left,
#right {
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}

#left {
margin-left: -100%;
}

#right {
margin-left: -200px;
}

#center {
margin: 0 210px;
height: 200px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="wrap">
<!-- center一定要放在最前面 -->
<div id="center">我是中间</div>
</div>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
</body>
</html>
 
效果：与上述两种方法相同
 
 
posted @ 2021-04-27 17:14  #Friday  阅读(98)  评论(0)    收藏  举报