怎样用CSS+DIV写三个并列的层,并且两边宽高和高度固定,中间宽高高度自适应屏幕呢?附图
两个并列的层已经做出来了，现在要用加入第三个并列的层该怎么办？<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//E...
两个并列的层已经做出来了，现在要用加入第三个并列的层该怎么办？
<!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>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
.wrap { width: 100%; height: 100%; }
.fixed { float: left; width: 200px; height: 100%; background: #000; margin-left: -100%; }
.main { float: left; width: 100%; height: 100%; }
.main-inner { margin-left: 200px; background: #f00; height: 100%;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="main-inner">
test
</div>
</div>
<div class="fixed">a</div>
</div>
</body>
</html> 展开
<!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>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
.wrap { width: 100%; height: 100%; }
.fixed { float: left; width: 200px; height: 100%; background: #000; margin-left: -100%; }
.main { float: left; width: 100%; height: 100%; }
.main-inner { margin-left: 200px; background: #f00; height: 100%;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="main-inner">
test
</div>
</div>
<div class="fixed">a</div>
</div>
</body>
</html> 展开
5个回答
展开全部
试一下父层相对定位.中间那个层绝对定位.不设宽度.两边空出的用PADDING.左右两侧定位.然后在中间在写一个层100%宽度.~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
.wrap { width: 100%; height: 100%; }
.fixed { position:fixed; top:0px; left:0px; width:200px; height: 100%; background: black;position:absolute; top:0px; }
.main { position:fixed; top:0px; left:200px; right:0px; height: 100%; }
.main-inner {position:fixed; top:0px; left:200px; right:0px; margin-left: 200px; background: red; height: 100%;}
</style>
是这种效果吗
html, body { height: 100%; margin: 0; padding: 0; }
.wrap { width: 100%; height: 100%; }
.fixed { position:fixed; top:0px; left:0px; width:200px; height: 100%; background: black;position:absolute; top:0px; }
.main { position:fixed; top:0px; left:200px; right:0px; height: 100%; }
.main-inner {position:fixed; top:0px; left:200px; right:0px; margin-left: 200px; background: red; height: 100%;}
</style>
是这种效果吗
更多追问追答
追问
麻烦大哥你 看清问题在回答啊
追答
html, body { height: 100%; margin: 0; padding: 0; }
.wrap { width: 100%; height: 100%; }
.fixed { position:fixed; top:0px; left:0px; width:200px; height: 100%; background: black;position:absolute; top:0px; }
.main { position:fixed; top:0px; width:200px; right:0px; height: 100%; }
.main-inner {position:absolute; top:0px; left:0px; right:0px; background: red; height: 100%;}
.midd { position:fixed; top:0px; bottom:0px; right:200px; left:200px; background-color:yellow;}
test
a
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<style type="text/css">
*{
margin:0;
padding:0;
}
.left{
float:left;
width:300px;
height:800px;
background:#333;
}
.center{
position:absolute;
z-index:-1;
right:300px;
left:300px;
float:left;
width:100%;
height:800px;
background:#ccc;
}
.right{
background:#999;
float:right;
width:300px;
height:800px;
}
</style>
</head>
<body>
<div id="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.left{
float:left;
width:300px;
height:800px;
background:#333;
}
.center{
position:absolute;
z-index:-1;
right:300px;
left:300px;
float:left;
width:100%;
height:800px;
background:#ccc;
}
.right{
background:#999;
float:right;
width:300px;
height:800px;
}
</style>
</head>
<body>
<div id="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道我理解的对不对啊 你可以看下双飞翼的那个写法 在网上搜一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用javascript来控制吧！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
