131固定两边,变化中间

这里要实现得是,两边固定不变,变化中间的效果

实现代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#header,#content,#footer{
 background-color:#ccc;
 border:1px solid #00C;
 height:50px;
 80%;
 margin:10px auto;
}
#content{
 height:500px;
}
#left{
 height:500px;
 100px;
 float:left;
 border:solid 1px #FF0;
 background-color:#0C3;
}
#right{
 height:500px;
 100px;
 float:right;
 border:solid 1px #060;
 background-color:#c96;
}
#cont{
 height:500px;
 100%;
 float:left;
 margin-left:-208px;
 overflow:hidden;
}
#varcont{
 height:500px;
 border:1px solid #000;
 margin-left:208px;
 background-color:#CC3;
}
</style>
</head>

<body>
<div id="header"><h3>1-3-1(2)</h3></div>

<div id="content">
    <div id="left"> </div>
     <div id="cont"><div id="varcont"></div></div>
    <div id="right">
 sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs
    </div>
</div>
<div id="footer"></div>
</body>
</html>

其实实现这一效果主要是利用调整 margin的变化,来实现得。

原文地址:https://www.cnblogs.com/zfang/p/2248067.html