div css 设置三列,左右固定宽度，中间自定义宽度，代码如下。 <div class="footer"> <div class="footer-l
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div css 设置三列,左右固定宽度，中间自定义宽度，代码如下。 <div class="footer"> <div class="footer-l相关的知识，希望对你有一定的参考价值。
<div class="footer">
<div class="footer-left"></div>
<div class="footer-center">
</div>
<div class="footer-right"></div>
</div>
css 代码如下。
.footer position:absolute;bottom:0px;height:46px;
.footer-left,.footer-right,.footer-centerheight:46px;
.footer-leftwidth:32px;float:left;background:url(../images/footer_left.jpg) no-repeat;margin:0px 0 0 0;overflow:inherit;
.footer-centerwidth:inherit;background:url(../images/footer_bg.jpg) repeat-x;margin:0;padding:0 0px 0 0px;overflow:auto;
.footer-rightwidth:22px;float:right:background:url(../images/footer_right.jpg) no-repeat;margin:0px 0 0 0;overflow:inherit;
上面这个代码是我参考别的教程写的，但总不对，谁帮我重写下，或指出其中的错误。
footer position:absolute;bottom:0px;height:46px;width:宽度值;overflow:hidden;
这样就可以了
如果固定footer的宽度，那这样做哪还有啥意思
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.footerposition:absolute;bottom:0px;height:46px;
.footer-left,.footer-right,.footer-centerheight:46px; border:1px #ccc solid
.footer-leftwidth:32px;float:left;background:url(../images/footer_left.jpg) no-repeat;margin:0px 0 0 0;overflow:hidden
.footer-centerwidth:auto;overflow:auto; float:left;background:url(../images/footer_bg.jpg) repeat-x;margin:0;padding:0 0px 0 0px;
.footer-rightwidth:22px;float:right;background:url(../images/footer_right.jpg) no-repeat;margin:0px 0 0 0;overflow:hidden
-->
</style>
</head>
<body>
<div class="footer">
<div class="footer-left"></div>
<div class="footer-center">
gjhgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjffffffffffffffffffffffffffffffffffffffffffffjjjjjjffffffffffffffffffffffffffffffffffffffffffffjjjjj
</div>
<div class="footer-right"></div>
</div>
</body>
</html>本回答被提问者采纳 参考技术B .footer position:absolute;bottom:0px;height:46px;overflow:hidden;
不固定也行啊，反正你出现问题的是在下面，高度有就行了，就这个代码就可以了
css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）
1.两列自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
#left{float: left;background: #ccc;height: 400px;width: 400px;}
#right{background: green;height: 400px;position: absolute;left: 400px;right: 0;}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">11111<br>11111<br>11111<br>11111<br>11111<br></div>
</body>
</html>
2.三列中间固定左右自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#left{height: 300px;background: orange;float: left;width: 50%;position: relative;margin-left: -150px;}
#right{height: 300px;background: orange;float: right;width: 50%;margin-left: -150px;}
#center{width: 300px;height: 300px;background: green;float: left;position: relative;}
</style>
</head>
<body>
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>
</body>
</html>
3.三列中间自适应，左右固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#left{width: 300px;height: 300px;float: left;background: green;}
#right{height: 300px;background: green;width: 300px;float: right;}
#center{height: 300px;margin: 0 300px;background: #ccc;}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="center">
</div>
</body>
</html>
每种自适应写了一种方案，欢迎补充！
------------------------------------------------------------------------------
汗！不允许150个字内发布，那我就再写一种关于三列左右固定，中间自适应布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#left{width: 300px;height: 300px;position: absolute;left: 0;background: green;}
#right{height: 300px;background: green;width: 300px;position: absolute;right: 0;}
#center{height: 300px;margin: 0 300px;background: #ccc;}
</style>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
<div id="center">
</div>
</body>
</html>
以上是关于div css 设置三列,左右固定宽度，中间自定义宽度，代码如下。 <div class="footer"> <div class="footer-l的主要内容，如果未能解决你的问题，请参考以下文章